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

【问题标题】：Wow.js repeat animation every time you scroll up or down每次向上或向下滚动时，Wow.js 都会重复动画
【发布时间】：2020-09-10 19:28:22
【问题描述】：

我对 Jquery 还是很陌生。我希望我的 Wow.js 动画可以运行不止一次。例如：我滚动到页面底部并查看所有动画，如果我滚动回顶部，我会再次看到向下滚动时的动画。我希望我自己解释。我已经看到很多网站在他们的页面上重复动画，但不幸的是我不记得了，我无法提供链接。

我已经试过了：

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

但是如果你稍微滚动一下它也会重复动画，而且看起来很难看。我试着更好地解释我：我的动画有一个，如果它聚焦动画被触发，然后我向下滚动到另一个 div 并且前一个 div 不再可见（不在窗口视口中），然后我再次滚动带动画回到我的 div 并再次触发动画。

对于这个乱七八糟的问题，我很抱歉，但我真的不知道如何解释。

提前致谢！

【问题讨论】：

你有这方面的运气吗？

标签： javascript jquery animation scroll wow.js

【解决方案1】：

Benoît Boucart 的这个例子展示了当用户滚动出视图并返回时如何“重置”动画。这里的关键是第二个函数，它在元素滚动出视图时删除动画 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')
   }
});

【讨论】：

【解决方案2】：

如果用户想在两个事件上重复动画，即

onScrollUp
onScrollDown

那么这将是一个很好的解决方案：

首先创建一个 addBox 函数，它将有助于将新元素推送到WOW 盒子数组中。

WOW.prototype.addBox = function(element){
    this.boxes.push(element);
};

然后使用jQuery 和scrollspy 插件帮助检测哪个元素不在视图中，然后将WOW 推送为：

$('.wow').on('scrollSpy:exit',function(){
    var element = $(this);
    element.css({
        'visibility' : 'hidden',
        'animation-name' : 'none'
    }).removeClass('animated');
    wow.addBox(this);
});

解决方案：ugurerkan

【讨论】：

【解决方案3】：

@vivekk 的回答是正确的，我只是添加了一个工作示例，以便人们可以轻松获得它

见Demo小提琴

         <script>
         // Repeat demo content
           var $body = $('body');
           var $box = $('.box');
          for (var i = 0; i < 20; i++) {
          $box.clone().appendTo($body);
            }

          // Helper function for add element box list in WOW
         WOW.prototype.addBox = function(element) {
         this.boxes.push(element);
        };

        // Init WOW.js and get instance
       var wow = new WOW();
       wow.init();

      // Attach scrollSpy to .wow elements for detect view exit events,
        // then reset elements and add again for animation
         $('.wow').on('scrollSpy:exit', function() {
        $(this).css({
         'visibility': 'hidden',
         'animation-name': 'none'
        }).removeClass('animated');
        wow.addBox(this);
       }).scrollSpy();

       </script>

【讨论】：