[BUG]请认领,CSS 3D动画可重现
wxml:
< view style = "perspective:900px;overflow: visible" > < view animation = "{{testAnimate}}" style = "position: relative;width:80px;height: 100px;transform-style: preserve-3d;" > < view class = "test-card opposite-face" >B</ view > < view class = "test-card" >A</ view > </ view > </ view > |
wxs:
Page({ data: { testAnimate: null , }, onLoad() { var self = this ; setTimeout( function () { var animate = wx.createAnimation({ duration: 4000 }); // 做一个翻转动画 animate.rotateY(180).step(); self.setData({ testAnimate: animate.export() }) }, 2000) } }) |
wxss:
.test-card { background : #e2e2e2 ; font-size : 40px ; position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; } .opposite-face {transform: rotateY( 180 deg); background : green ;} |
背景:我在做一个“卡片翻转”效果,用了A面和B面。翻转的时候旋转A和B的共同父元素。
- 切换前,A面正面,没错
- 转到背面的时候,为啥还是A?????
- 直到动画完成,才闪出B