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動畫可重現(xiàn)](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327rocccecg6b1egg61.jpg)
2. 轉到背面的時候，為啥還是A？？？？？
![【已解決】[BUG]請認領，CSS 3D動畫可重現(xiàn)](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327hkqq3yl5o339li99.jpg)
3. 直到動畫完成，才閃出B
![【已解決】[BUG]請認領，CSS 3D動畫可重現(xiàn)](https://pic.aiyingli.com/wp-content/uploads/2018/01/083327zii2buax1cxc378h.jpg)
網友回復：
L***：
你好，請檢查下 WXSS 中 backface-visibility 的設置。
s***：
backface-visibility是默認值，我沒顯式聲明。即使我將頁面全部元素都顯式聲明backface-visibility: visible也無變化（除了Page）。
s***：
就貼上的代碼就能100%重現(xiàn)了，同樣用于web沒有問題。
主要問題在于，B在動畫過程中不會顯示，動畫結束后才突然出現(xiàn)。
L***：
請考慮設置 backface-visibility: hidden
s***：
我按照你的提示，現(xiàn)在方案改為：將旋轉動畫同時應用于A和B，單獨將A設置為backface-visibility: hidden。
這樣可以達到效果，不知道這是不是你的本意。（我還是擔心因為機器處理性能問題，使得兩組動畫的步伐沒有一致）
s***：
我原來的方案是動畫應用于父元素，A疊在B上，那父元素的背面就是B。這個方案沒有必要用到backface-visibility: hidden。
L***：
3D渲染可能并不像你想象的那樣，所以請用新的方案來做。
s***：系統(tǒng)記錄
愛盈利-運營小咖秀(www.jza6.com) 始終堅持研究分享移動互聯(lián)網App運營推廣經驗、策略、全案、渠道等純干貨知識內容；是廣大App運營從業(yè)者的知識啟蒙、成長指導、進階學習的集聚平臺；
想了解更多移動互聯(lián)網干貨知識，請關注微信公眾號運營小咖秀（ID: yunyingshow）
