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

动画效果：

wxml:

view class='main '！-正面的框-view class=' box B1 ' animation=' { { animationMain } } ' bind tap=' rotateFn ' data-id=' 1 ' image src=' http : '/image/view！-背面的框-view class=' box B2 ' animation=' { { animationBack } } ' bind tap=' rotateFn ' data-id=' 2 ' image src=' http : '/image/view/view XSS 3360。main { position : absolute top : 50%；左侧： 50%;宽度： 300像素；height : 300 pxtransform : translate(-50%，-50%)；-web套件-透视图： 1500；//子元素获得透视效果-moz-透视： 1500；} .盒子{位置：绝对值；top : 0；左： 0；宽度： 300像素；高度： 300像素：全1;背面-可见性：隐藏；边框半径： 10px光标：指针；}.方框图{边框半径： 10px宽度： 100%;高度： 100%;} .B1 {背景：天蓝；} . B2 { background : matotransform : Rotatey(-180)；} js : Page({ data : { animation main :Null//正面动画背景：完整，//背面}，RotarTefn(e){ var id=e . current target。数据集。识别这个。动画_主=wx。create animation({ duration :400，TimingFunctions : ' linear ' })这。动画_ back=wx。createanimation({持续时间：400，TimingFunctions : ' linear ' })//点击正面if(id==1){ this。动画_主。旋转180度.这一步。动画_后退。rotatey(0).这一步。setdata({ animation main :这个。动画_主。export()、动画回本：动画_后退。export()、}) } //点击背面else {这个。动画_主。rotatey(0).这一步。动画_后退。rotatey(-180).这一步。setdata({ animation main :这个。动画_主。export()、动画回本：动画_后退。export()，}) } }，})总结

以上所述是小编给大家介绍的微信小程序实现点击卡片翻转效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！