3D 变换 (translate3D) 似乎导致移动设备上的 jQuery 动画缓慢

Question

我正在使用 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的sn-p：

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

提前感谢您的宝贵时间！

Answer 1

jQuery 的 animate 函数很可能是这种情况下的罪魁祸首，因为它没有利用硬件加速，而这是在 iPhone 等移动设备上实现流畅性能所必需的。

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

JS Fiddle Demo

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

我使用 iPad 进行了测试。事实上，如果您删除对 j​​Query Animate 增强库的引用，您将看到移动设备上的性能下降。