0

我对 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 导航点的全屏部分。）动画会触发。当我向下滚动时，当滚动条滚动到下一部分时，动画会再次触​​发。

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

有任何想法吗？

4

1 回答 1

1

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

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

$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'right',
    scrollBar: true,
    afterRender: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});
于 2019-03-18T11:36:58.613 回答