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(180deg);background: green;} |
背景：我在做一个“卡片翻转”效果，用了A面和B面。翻转的时候旋转A和B的共同父元素。
1. 切换前，A面正面，没错
![【已解决】[BUG]请认领，CSS 3D动画可重现](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327rocccecg6b1egg61.jpg)
2. 转到背面的时候，为啥还是A？？？？？
![【已解决】[BUG]请认领，CSS 3D动画可重现](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327hkqq3yl5o339li99.jpg)
3. 直到动画完成，才闪出B
![【已解决】[BUG]请认领，CSS 3D动画可重现](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327zii2buax1cxc378h.jpg)
网友回复：
L***：
你好，请检查下 WXSS 中 backface-visibility 的设置。
s***：
backface-visibility是默认值，我没显式声明。即使我将页面全部元素都显式声明backface-visibility: visible也无变化（除了Page）。
s***：
就贴上的代码就能100%重现了，同样用于web没有问题。
主要问题在于，B在动画过程中不会显示，动画结束后才突然出现。
L***：
请考虑设置 backface-visibility: hidden
s***：
我按照你的提示，现在方案改为：将旋转动画同时应用于A和B，单独将A设置为backface-visibility: hidden。
这样可以达到效果，不知道这是不是你的本意。（我还是担心因为机器处理性能问题，使得两组动画的步伐没有一致）
s***：
我原来的方案是动画应用于父元素，A叠在B上，那父元素的背面就是B。这个方案没有必要用到backface-visibility: hidden。
L***：
3D渲染可能并不像你想象的那样，所以请用新的方案来做。
s***：系统记录
爱盈利-运营小咖秀(www.aiyingli.com) 始终坚持研究分享移动互联网App运营推广经验、策略、全案、渠道等纯干货知识内容；是广大App运营从业者的知识启蒙、成长指导、进阶学习的集聚平台；
想了解更多移动互联网干货知识，请关注微信公众号运营小咖秀（ID: yunyingshow）
