JavaScript：处理事件的有效方式（特定于 Firefox）

Question

我是运行触发 TweenMax 动画的滚动事件，我注意到，虽然它在 Chrome 上看起来不错，但存在相当大的延迟在 Firefox 上。有没有人对如何尽可能有效地处理此滚动事件有建议？另外，Firefox 的渲染是否有一些我不知道的可能导致此问题的原因？任何线索将不胜感激！

要点是我正在我的页面上寻找名为 "customers" 的容器，每个容器包含三个 individual "customer" 元素。当匹配 "customers" 的 div 滚动到视图中时，触发 TweenMax 动画，并添加一个名为 "animated" 的 class，以防止元素随后重新设置动画。

这里是 fiddle 的基本演示： http://jsfiddle.net/epp37jsq/

编辑

澄清一下，fiddle 仅演示了我的动画函数的行为。那里不会出现滞后，因为文件大小非常小。实际现场，我有11组3张"customers."图片是一样的，但是拉了33次。将来，图像将是独一无二的。本质上，这 11 个组中的每一个都在调用动画。我正在寻找有关如何提高页面速度的建议。

还有我的代码：

var scrollTimer = null;
  $(window).scroll(function () {
      if (scrollTimer) {
          clearTimeout(scrollTimer);   // clear any previous pending timer
      }
      scrollTimer = setTimeout(handleScroll, 500);   // set new timer
      console.log("fired!");
  });

  function handleScroll() {
    scrollTimer = null;
    $('.customers').each(function() {
      if (!$(this).hasClass('animated')) {
        if ($(this).isOnScreen(0.45, 0.45)) {
          TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
              y: 50,
              opacity: 0
          }, {
              y: 0,
              opacity: 1,
              ease: Power2.easeOut
          }, 0.15);
          $(this).addClass('animated');
        }
      }
    });
  }

Answer 1

通常使用 Firefox，在 x 或 y 轴上进行翻译可能会导致一些卡顿。有时向您的补间添加轻微的 rotation:0.001 可以帮助您的补间在 Firefox 中更加流畅。

http://jsfiddle.net/pwkja058/

另外使用 GSAP 特殊属性 autoAlpha 而不是 opacity 可以帮助提高性能

 TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
     y: 200,
     rotation:0.01, /* add a slight rotation */
     autoAlpha: 0 /* use instead of opacity */
 }, {
     y: 0,
     rotation:0.01, /* add a slight rotation */
     autoAlpha: 1, /* use instead of opacity */
     ease: Power2.easeOut
 }, 0.15);

autoAlpha 是 GSAP CSSPlugin:

的一部分

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

autoAlpha - Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

JavaScript：处理事件的有效方式（特定于 Firefox）

JavaScript: An efficient way to handle events (Firefox-specific)

javascript

jquery

firefox

gsap