wow.js 和 fullpage.js 动画同时触发滚动进/出视口

Question

我对 Wow.js 和 Fullpage.js 有疑问。我已经设法让他们一起工作，这是脚本：

$(document).ready(function() {
  $('#fullpage').fullpage({
    'navigation': true,
    'navigationPosition': 'right',
    scrollBar: true,
    onLeave: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});

<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">

我将数据迭代设置为 1，以防止它重复。

这里是您可以看到实际效果的网站 lancewalkerdesign.com

但是，当我滚动到一个视口时（首页上的每个部分都是带有 ul 导航点的全屏部分。）动画会触发。当我向下滚动时，当滚动条滚动到下一部分时，动画会再次触​​发。

我宁愿在进入视口时只看到这个动画一次，无论是向下滚动还是向上滚动，而不是在它离开时再次看到。

有什么想法吗？

Answer 1

为什么在onLeave 回调中初始化 wow？ 您可能只需要在页面加载时执行一次。

尝试在afterRender 回调中只初始化一次：

$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'right',
    scrollBar: true,
    afterRender: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});