Question

我正在运行一个触发TweenMax动画的滚动事件，而且我注意到，虽然它在Chrome上看起来很不错，但Firefox存在相当大的延迟。有没有人有关于如何尽可能有效地处理这个滚动事件的建议？另外，Firefox的呈现是否有一些我不知道的可能导致这种情况？任何线索都将不胜感激！

要点是我在我的页面上寻找名为＆＃34; customers＆＃34;的容器，每个容器包含三个个人＆＃34;客户＆＃34;元素。当一个div匹配＆＃34;客户＆＃34;滚动到视图，触发TweenMax动画，并添加一个名为＆＃34; animated＆＃34;的类，它可以防止元素随后重新制作动画。

以下是基本演示的小提琴： http://jsfiddle.net/epp37jsq/

修改

为了澄清，小提琴只演示了我的动画功能的行为。由于文件大小非常小，因此不会出现延迟。在实际网站上，我有11组3＆＃34;客户。＆＃34;图像是相同的，但拉了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 - 与不透明度相同，但当值达到0时，可见性属性将设置为＆＃34;隐藏＆＃34;以提高浏览器呈现性能并防止目标上的点击/交互。当值不是0时，可见性将设置为＆＃34;继承＆＃34;。它未被设置为＆＃34;可见＆＃34;为了尊重继承（想象一下隐藏了父元素 - 将子元素设置为显式可见会导致它出现时可能不符合预期）。为方便起见，如果元素的可见性最初设置为＆＃34;隐藏＆＃34;并且不透明度为1，它将假设不透明度也应该从0开始。这样可以很容易地将页面上的内容视为不可见（设置您的css可见性：隐藏），然后随时淡入它们。

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

1 个答案: