每次向上或向下滚动时,Wow.js都会重复动画

Question

我对Jquery很新.我想我的Wow.js动画可以运行不止一次.例如:我滚动到我的页面底部,看到所有的动画,如果我滚动回到顶部,我再次看到动画,如向下滚动.我希望我解释自己.我已经看过许多网站在他们的网页上重复动画,但不幸的是我不记得它们,我无法提供链接.

我已经尝试过了:

$(window).scroll(function(){
    new WOW().init();
}

但是如果你滚动一点,它也重复动画,看起来很难看.我试着更好地解释一下:我有一个我的动画,如果它是聚焦动画被触发,那么我向下滚动到另一个div而前一个div不再可见(不在窗口视口中),然后再滚动用动画回到我的div,再次触发动画.

对于这个混乱的问题,我很抱歉,但我真的不知道如何解释它.

提前致谢!

Answer 1

BenoîtBoucart的这个例子展示了当用户滚出视图并返回时动画如何"重置".这里的关键是当元素滚出视图时删除动画css类的第二个函数.我希望WOW.js能够实现这一点,但他们表示他们不打算这样做.

http://codepen.io/benske/pen/yJoqz

片段:

// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
  var $this     = $(this),
      offsetTop = $this.offset().top;

  if (scrolled + win_height_padded > offsetTop) {
    if ($this.data('timeout')) {
      window.setTimeout(function(){
        $this.addClass('animated ' + $this.data('animation'));
      }, parseInt($this.data('timeout'),10));
    } else {
      $this.addClass('animated ' + $this.data('animation'));
    }
  }
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
   var $this     = $(this),
       offsetTop = $this.offset().top;
   if (scrolled + win_height_padded < offsetTop) {
     $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
   }
});