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

Wow.js repeat animation every time you scroll up or down

提问by Automatik

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.

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

I have already tried this:

我已经试过了：

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

But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.

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

I'm sorry for this messy question but I really don't know how to explain it.

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

Thanks in advance!

提前致谢！

回答by Tony He

This example by Beno?t Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.

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

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

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

Snippet:

片段：

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

回答by vivekkupadhyay

If a user wants to repeat the animation on both the events i.e.

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

• onScrollUp
• onScrollDown

• 向上滚动
• 向下滚动

then this will be a good solution for it:

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

First create an addBoxfunction, it will help to push new elements into the WOWboxes array.

首先创建一个addBox函数，它将有助于将新元素推入WOWbox 数组。

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

Then use jQueryand scrollspyplugin that helps to detect which element is out of the view and then push WOWas:

然后，使用jQuery和scrollspy插件可以检测哪一个元素是从视图的，然后按WOW如下：

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

Solution Courtesy: ugurerkan

解决方案提供：ugurerkan

回答by thedudecodes

Answer by @vivekk is correct I m just adding a working example so that people can easily get this

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

see the fiddle

看小提琴

         <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>
      https://jsfiddle.net/ugurerkan/53641ovn/