微信小程序实现点击卡片 翻转效果
2019-09-04 10:40
2703 查看
动画效果:
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(), }) } }, })
总结
以上所述是小编给大家介绍的微信小程序实现点击卡片 翻转效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- [微信小程序]点击切换卡片动画效果
- 微信小程序实现类似微信点击语音播放效果
- 微信小程序实现卡片层叠滑动效果
- 微信小程序实现点击效果
- 微信小程序实现手势滑动卡片效果
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
- 微信小程序实现卡片左右滑动效果的示例代码
- 微信小程序——实现发送验证码按钮效果
- 微信小程序swiper实现滑动放大缩小效果
- Android 实现微信,QQ的程序前后台切换:back键切换后台;点击通知栏恢复前台。
- 微信小程序实现点击图片旋转180度并且弹出下拉列表
- iOS实现点击微信头像(放大、缩放、保存)效果
- 点击微信网页的a标签直接跳转到淘宝APP打开怎么实现的?附:动图演示效果
- 微信小程序小组件 基于Canvas实现直播点赞气泡效果
- 一个纯CSS实现的卡片翻转效果
- 微信小程序实现跑马灯效果(完整代码)
- 微信小程序实现给循环列表添加点击样式实例
- viewpager+fragment的懒加载实现微信点击和滑动切换功能(切换效果)
- 微信小程序关于客服发送小程序卡片的实现方法
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】