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

我使用CSS translate 3D和scale 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();

---

提前感谢您的时间

jQuery的动画功能很可能是这种情况下的罪魁祸首，因为它没有利用硬件加速，而硬件加速是在iPhone等移动设备上平稳运行所必需的

您可以使用该插件，它覆盖jQuery animate函数并使用css3转换。下面是一个演示：

---

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

我在最近的一个项目中使用了该插件，我不得不说，这真是太好了。这是一个伟大的发现！我曾考虑过使用CSS3动画，然后又回到jQuery，但这对您来说是一项艰巨的工作。上面的小提琴实际上不起作用。这个是

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