javascript - 如何在滚动事件发生之前为元素设置动画？

Question

在 Fullpage.js 方面需要一些帮助，但这个问题也可以看得更笼统。

如何在滚动事件发生之前插入动画？如果您有没有 Fullpage.js 的解决方案，我们也欢迎您。我阅读了有关在某处完全阻止滚动/单击事件并赋予自己的函数和方法的信息，但这不是我要搜索的内容，因为我无法从 Fullpage.js 脚本重写任何事件。只想将动画粘贴在滚动输入和实际滚动之间。

实际示例:我滚动，元素淡出，然后页面滚动到下一部分。

实例:http://www.basicagency.com/yir/

提前致谢。

Answer 1

我相信您正在寻找 onLeave回调。

This callback is fired once the user leaves a section, in the transition to the new section. Returning false will cancel the move before it takes place.

$('#fullpage').fullpage({
  onLeave: function(index, nextIndex, direction){
    alert('onLeave fired');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
  <div class="section">section</div>
  <div class="section">section</div>
  <div class="section">section</div>
  <div class="section">section</div>
</div>