3D转换（translate3D）似乎导致移动设备上缓慢的jQuery动画

我正在使用CSS翻译3D并缩放3D以获得响应式导航菜单。 在触摸设备上，更具体地说，iPhone，它在同一页面上导致单独的jQuery动画执行缓慢，几乎就像在动画时闪烁一样。 任何人都可以解释这个问题吗？

如果它有任何相关性，我使用的是SASS：

nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include transition-delay( ease, 0s ); @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) ); @include transform-origin( 50% 0% ); } } } 

下面是一个缓慢运行的jQuery片段：

  this.container.filter(':visible').animate({ 'left': '-=' + self.childWidth + 'px' }, 300).clearQueue(); 

感谢您提前的时间！

Answer 1

jQuery的动画function很可能是这种情况的罪魁祸首，因为它没有利用硬件加速，这是iPhone等移动设备上流畅性能所需要的。

您可以使用jQuery Animate Enhanced插件，该插件会覆盖jQuery animate函数并使用css3过渡。 这是一个演示：

JS小提琴演示

 $(".container").animate({ 'left': '-=' + 400 + 'px', 'useTranslate3d': true }, 500); 

我用iPad测试过。 实际上，如果删除对jQuery Animate Enhanced库的引用，您将看到移动设备上的性能下降。