当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现点击卡片 翻转效果

微信小程序实现点击卡片 翻转效果

2019年09月06日  | 移动技术网IT编程  | 我要评论

动画效果：

  

wxml:

<view class='main'>
  <!--正面的框 -->
  <view class="box b1" animation="{{animationmain}}" bindtap='rotatefn' data-id="1" >
   <image src=""></image>
  </view>
  <!--背面的框 -->
  <view class="box b2" animation="{{animationback}}" bindtap='rotatefn' data-id="2">
   <image src=""></image>
  </view>
</view>

wxss: 

.main {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 300px;
 transform: translate(-50%,-50%);
 -webkit-perspective: 1500;//子元素获得透视效果 
 -moz-perspective: 1500;
}
 
.box {
 position: absolute;
 top: 0;
 left: 0;
 width: 300px;
 height: 300px;
 transition: all 1s;
 backface-visibility: hidden;
 border-radius: 10px;
 cursor: pointer;
}
.box image{
 border-radius: 10px;
 width: 100%;
 height: 100%;
}
.b1{
 background:skyblue;
}
.b2 {
 background:tomato;
 transform: rotatey(-180deg);
}
js: 
page({
 data: {
  animationmain:null,//正面
  animationback:null,//背面
 },
 rotatefn(e) {
  var id = e.currenttarget.dataset.id
  this.animation_main = wx.createanimation({
    duration:400,
    timingfunction:'linear'
   })
   this.animation_back = wx.createanimation({
    duration:400,
    timingfunction:'linear'
   })
  // 点击正面
 
  if (id==1) {
   this.animation_main.rotatey(180).step()
   this.animation_back.rotatey(0).step()
   this.setdata({
    animationmain: this.animation_main.export(),
    animationback: this.animation_back.export(),
   })
  }
  // 点击背面
  else{
   this.animation_main.rotatey(0).step()
   this.animation_back.rotatey(-180).step()
   this.setdata({
    animationmain: this.animation_main.export(),
    animationback: this.animation_back.export(),
   })
  }
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现点击卡片 翻转效果,希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网