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

【问题标题】：jQuery and Greensock animations -- animate all elements on screen with classnamejQuery 和 Greensock 动画——使用类名为屏幕上的所有元素设置动画
【发布时间】：2015-10-23 19:04:33
【问题描述】：

一旦滚动到视图中，我正在尝试为页面上与“客户”类匹配的所有元素设置动画。

我目前的版本：

$(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');
    }
  }
})

当第一个元素进入屏幕时，它会为第一个元素设置动画，不幸的是，当其他元素离开屏幕时，它们也会为它们设置动画。我想要发生的是，每个匹配“客户”的元素在滚动到视图时都会动画。

（注意 isOnScreen 是一个自定义函数，用于在窗口内进行元素检测）。

我尝试过使用 jquery 的 each 函数：

$(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)。

我得到了意想不到的行为，即当我滚动时元素继续动画，即使它们应该已经删除了他们的“动画”类（我希望它们只在他们第一次进入屏幕时动画）。

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

【问题讨论】：

你能创建一个这样的jsFiddle吗？如果没有演示，很难想象您真正想要做什么。
这里很难加载 greensock 库，但这是我的页面结构的要点：jsfiddle.net/jnstqchu/8
你能分享你的.onScreen() 函数吗？我看到 TweenMax 加载得很好。
确定更新：jsfiddle.net/jnstqchu/10
this 是否与您要查找的内容相近？

标签： javascript jquery animation gsap

【解决方案1】：

这就是我认为你需要做的事情。

首先，window 对象上的scroll 事件当然必须有一个侦听器。显而易见。
然后使用each 循环遍历.customers 元素。
然后您检查这些.customers 元素中的每个是否已经有一个animated 类。如果他们这样做了，那么什么都不会发生，但如果他们不这样做，其余的就会发生。
然后使用自定义函数.isonScreen() 检查当前.customers 元素是否位于定义的视口区域中。
然后，TweenMax 将在我们当前循环的当前 .customers 元素中找到的 .customer 元素设置为动画。注意.customers（父元素）和子.cusotmer 元素之间的区别。请记住，我们在一个循环中，因此每个.customers 元素都循环通过，然后我们进一步尝试在每个元素中找到.customer 元素。帮助我们找到内部.customer元素的jQuery是：$(this).find('.customer')。
接下来，在您的 CSS 中，opacity: 0; 行之前已为 .customer 元素注释掉。我取消了它的注释。
然后我们使用TweenMax 的.staggerFromTo 方法来定义一组初始属性，以开始我们的补间，并结束另一组属性，所有这些之间都有一点交错动画，所以他们不会只是同时出现，他们也不会在下一个播放之前等待对方完成。这是一个重叠的动画。
这里要注意的另一件事是，我们正在为元素的y 属性设置动画，这是TweenMax 提供的特殊属性，它基本上是为translateY(...) 属性设置动画的捷径，就像您使用CSS 那样.
最后，将.animated 类应用于当前循环的.customers 元素。

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 是小提琴。希望这会有所帮助。

【讨论】：