Backbone.js/Zepto.js 的动画答案

【问题标题】：Animations with Backbone.js/Zepto.jsBackbone.js/Zepto.js 的动画
【发布时间】：2012-10-08 18:22:57
【问题描述】：

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

【问题讨论】：

标签： ios mobile backbone.js zepto

【解决方案1】：

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

-webkit-backface-visibility: hidden;

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

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

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

【讨论】：

它成功了，我将它与将我的正文背景颜色设置为页面元素的一般颜色相结合。