wxml:
<view> <!--正面的框 --> <view animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 --> <view 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(), }) } }, })
总结
以上所述是小编给大家介绍的微信小程序实现点击卡片 翻转效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: