动画与Backbone.js的/ Zepto.js

Question

我目前正在使用Zepto.js的动画在Backbone.js的移动应用和页面转换期间有一个noticible白色闪烁，这是相当令人不快的视觉。我似乎无法想象，任何人都有一个想法，为什么这可能会发生？

我的动画代码如下：

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; 

如果不工作，你可能想尝试使用身体或动画元素

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

这将防止转体或将您的元素转换为GPU加速图层，将其栅格化为动画，这是闪烁可能发生的地方，因为正常的元素会变成动画图层。