3D转换(translate3D)似乎导致移动设备上的jQuery动画缓慢 [英] 3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

问题描述

我正在使用CSS转换3D和缩放3D作为响应式导航菜单.在触摸设备上，更具体地说，在iPhone上，这会导致同一页面上的单独jQuery动画执行缓慢，几乎就像在进行动画处理时频闪一样.谁能在这个问题上阐明什么?

I am using a CSS translate 3D and scale 3D for a responsive navigation menu. On touch devices, more specifically, iPhone, it is causing separate jQuery animations on the same page to perform sluggishly, almost as if it strobes when animating. Can anyone shed any light on this issue?

如果有任何相关性，我正在使用SASS:

If it is of any relevance, I am using 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的摘要:

Below is a snippet of the jQuery which is operating sluggishly:

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

谢谢您的时间！

推荐答案

在这种情况下，jQuery的动画功能很可能是罪魁祸首，因为它没有利用硬件加速的作用，这是在移动设备(如iPhone.

jQuery's animate function is most likely the culprit in this scenario since it does not take advantage of hardware acceleration, which is needed for smooth performance on mobile devices such as the iPhone.

您可以使用 jQuery Animate Enhanced 插件，该插件会覆盖jQuery动画函数和改用css3过渡.这是一个演示:

You could use the jQuery Animate Enhanced plugin, which overrides the jQuery animate function and uses css3 transitions instead. Here is a demo:

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

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

I tested with an iPad. In fact, if you remove the reference to the jQuery Animate Enhanced library, you will see the performance degradation on a mobile device.

这篇关于3D转换(translate3D)似乎导致移动设备上的jQuery动画缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！