Question

我目前正在使用Zepto.js在Backbone.js中使用移动应用程序进行动画制作，并且在页面转换期间会出现明显的白色闪烁，并且在视觉上非常令人不悦。我似乎无法想象，任何人都知道为什么会发生这种情况？

我的动画代码如下：

var $old = $('.page').not(this.el);

        //This fix was hard-won, just doing .css(property, '') doesn't work!
        $old.get(0).style["margin-left"] = ""
        $old.get(0).style["-webkit-transform"] = ""

        this.$el.appendTo('body').hide();
        this.$el.show().css({"margin-left": 320 * direction_coefficient});
        var that=this;
        that.$el.anim({translateX: -320 * direction_coefficient +'px'}, 0.3, 'ease-out');
        $old.anim({translateX: -320 * direction_coefficient + 'px'}, 0.3, 'ease-out', function() {
            $old.remove();
            //$('.page').css({"position": "static"});
        });

Answer 1

将动画元素的背面可见性（页面视图？）设置为隐藏以防止闪烁

-webkit-backface-visibility: hidden;

如果这不起作用，您可能想尝试在body或动画元素上使用

-webkit-transform:translate3d(0,0,0);

这将阻止将身体或您的元素转换为GPU加速图层，并对其进行栅格化以进行动画处理，这可能会发生闪烁，因为普通元素会变成动画图层。

Backbone.js / Zepto.js的动画

1 个答案: