收藏
回答

[BUG]请认领,CSS 3D动画可重现

问题模块
API和组件

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面正面,没错




2.  转到背面的时候,为啥还是A?????



3. 直到动画完成,才闪出B


最后一次编辑于  2017-12-14
回答关注问题邀请回答
收藏

7 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-12-18

    3D渲染可能并不像你想象的那样,所以请用新的方案来做。

    2017-12-18
    赞同
    回复
  • setoคิดถึงคุณ
    setoคิดถึงคุณ
    2017-12-18

    我原来的方案是动画应用于父元素,A叠在B上,那父元素的背面就是B。这个方案没有必要用到backface-visibility: hidden。

    2017-12-18
    赞同
    回复
  • setoคิดถึงคุณ
    setoคิดถึงคุณ
    2017-12-18

    我按照你的提示,现在方案改为:将旋转动画同时应用于A和B,单独将A设置为backface-visibility: hidden。

    这样可以达到效果,不知道这是不是你的本意。(我还是担心因为机器处理性能问题,使得两组动画的步伐没有一致)


    2017-12-18
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-12-18

    请考虑设置 backface-visibility: hidden

    2017-12-18
    赞同
    回复
  • setoคิดถึงคุณ
    setoคิดถึงคุณ
    2017-12-18

    就贴上的代码就能100%重现了,同样用于web没有问题。

    主要问题在于,B在动画过程中不会显示,动画结束后才突然出现。

    2017-12-18
    赞同
    回复
  • setoคิดถึงคุณ
    setoคิดถึงคุณ
    2017-12-18

    backface-visibility是默认值,我没显式声明。即使我将页面全部元素都显式声明backface-visibility: visible也无变化(除了Page)。

    2017-12-18
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-12-18

    你好,请检查下 WXSS 中 backface-visibility 的设置。

    2017-12-18
    赞同
    回复