0

我目前正在使用 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"});
        });
4

1 回答 1

2

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

-webkit-backface-visibility: hidden;

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

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

这将防止将身体或您的元素转换为 GPU 加速层，从而将其栅格化以进行动画处理，这就是正常元素转换为动画层时可能发生闪烁的地方。

于 2012-10-18T10:39:15.127 回答