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的片段，运行缓慢：

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

感谢您提前的时间！

Answer 1

jQuery的动画功能很可能是这种情况的罪魁祸首，因为它没有利用硬件加速，这是移动设备（如iPhone）平稳性能所必需的。

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

JS Fiddle Demo

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

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

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

1 个答案:

JS Fiddle Demo