jQuery 和 Greensock 动画 -- 使用类名为屏幕上的所有元素设置动画

Question

我正在尝试在页面上滚动到视图后与 class "customers" 匹配的所有元素进行动画处理。

我当前的版本：

$(window).on('scroll', function() {
  if(!$('.customers').hasClass('animated')) {
    if($('.customers').isOnScreen(0.45, 0.45)) {
      TweenMax.staggerTo($('.customer'), 0.3, {bottom:"+=50px", opacity:1,  ease: Power2.easeOut}, 0.15);
      $('.customers').addClass('animated');
    }
  }
})

努力在第一个元素进入屏幕时对其进行动画处理，不幸的是，结果也会在其他元素离开屏幕时对其进行动画处理。我想要发生的是，每个匹配 "customers" 的元素在滚动到视图中时都会进行动画处理。

（注意 isOnScreen 是在 window 中进行元素检测的自定义函数）。

我试过使用 jquery 的每个函数：

$(window).on('scroll', function() {
    $('.customers').each(function( i ) {  
      if(!this.hasClass('animated')) {
        if(this.isOnScreen(0.45, 0.45)) {
          TweenMax.staggerTo($('.customer'), 0.3, {bottom:"+=50px", opacity:1,  ease: Power2.easeOut}, 0.15);
          this.addClass('animated');
        }
      }
})

而且我还尝试将每个 "this" 语句包装为一个 jquery 元素作为 $(this).

我遇到了意想不到的行为，因为元素在我滚动时会继续动画，即使它们本应删除 "animated" class（我希望它们只在第一次时动画他们进入屏幕）。

我想我可能需要做的是创建一个客户数组，然后对数组中的每个元素执行 TweenMax，但我不确定这是否可行。

Answer 1

好的，这是我认为您需要做的。

当然，首先必须有 window 对象上的 scroll 事件的侦听器。陈述显而易见。
然后使用 each.

.customers

然后检查这些 .customers 元素中的每个是否已经有 animated class。如果，他们这样做了，那么什么也不会发生，如果他们不这样做，剩下的就是。
然后使用自定义函数 .isonScreen().

.customers

然后 TweenMax 对在我们当前循环的当前 .customers 元素中找到的 .customer 元素进行动画处理。请注意 .customers、父元素和子 .cusotmer 元素之间的区别。请记住，我们处于一个循环中，因此每个 .customers 元素都被循环遍历，然后我们进一步尝试在每个元素中找到 .customer 元素。帮助我们找到内部.customer个元素的jQuery是：$(this).find('.customer').
接下来，在您的 CSS 中，opacity: 0; 行之前已针对 .customer 元素注释掉。我取消了评论。
然后我们使用 TweenMax 的 .staggerFromTo 方法定义一组初始属性来开始我们的补间，并结束另一组属性，所有这些都带有一点点 stagger 在动画之间，所以它们不会同时出现，也不会在下一个播放之前等待彼此完成。这是一个重叠的动画。
这里要注意的另一件事是我们正在对元素的 y 属性进行动画处理，这是由 TweenMax 提供的特殊属性，基本上是一个简短的 -剪切动画 translateY(...) 属性就好像你使用 CSS.
最后，在当前循环的 .customers 元素上应用 .animated class。

JavaScript:

$(window).on('scroll', function() {
    $('.customers').each(function() {
        if (!$(this).hasClass('animated')) {
            if ($(this).isOnScreen(0.45, 0.45)) {
                TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
                    y: 200,
                    opacity: 0
                }, {
                    y: 0,
                    opacity: 1,
                    ease: Power2.easeOut
                }, 0.15);
                $(this).addClass('animated');
            }
        }
    });
});

Here就是fiddle。希望这会有所帮助。

jQuery 和 Greensock 动画 -- 使用类名为屏幕上的所有元素设置动画

jQuery and Greensock animations -- animate all elements on screen with classname

javascript

jquery

animation

gsap