Question

我试图动画所有与班级匹配的元素＆＃34;客户＆＃34;在我们的页面上滚动进入视图。

我当前的版本：

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

用于在第一个元素进入屏幕时为其设置动画，不幸的是，当它们在屏幕外时，它们也会激活其他元素。我想要发生的是每个匹配＆＃34;客户＆＃34;滚动到视图时动画。

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

我尝试过使用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');
        }
      }
})

我也尝试过包装每个＆＃34;这个＆＃34;声明为jquery元素为$（this）。

我得到了意想不到的行为，因为当我滚动时，元素会继续动画，即使他们应该有他们的动画＆＃34;删除了类（我希望它们仅在第一次进入屏幕时进行动画处理。）

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

Answer 1

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

首先必须在scroll对象上有一个window事件的监听器。陈述显而易见的。
然后使用.customers循环遍历each元素。
然后检查这些.customers元素中的每个是否已经有animated个类。如果，他们这样做，那么没有任何反应，但如果他们不这样做，其余的就会发生。
然后使用自定义函数.customers检查当前.isonScreen()元素是否在定义的视口区域中。
然后TweenMax动画在我们当前正在循环的当前.customer元素中找到的.customers个元素。请注意.customers，父元素和子.cusotmer元素之间的区别。请记住，我们在循环中，因此每个.customers元素都会循环，然后我们会进一步尝试在每个元素中找到.customer个元素。帮助我们找到内部.customer元素的jQuery是：$(this).find('.customer')。
接下来，在您的CSS中，先前为opacity: 0;元素注释了.customer行。我重新注释了它。
然后我们使用.staggerFromTo TweenMax方法来定义一组初始属性以开始我们的补间，并结束另一组属性，所有这些都有一点错开< / em>在动画之间，所以他们不会同时出现，他们也不会在下一个播放之前等待彼此完成。这是一个重叠的动画。

这里要注意的另一件事是我们正在动画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 是小提琴。希望这会有所帮助。

jQuery和Greensock动画 - 使用classname

1 个答案: