Question

我正在为我的新项目使用jquery fullpage和anime js。

当回调afterLoad时，我正在运行动画（显示）。我的问题是，有时当用户滚动比动画持续时间更快时，下一个动画（隐藏）被触发onLeave看起来并不像预期的那样。我尝试使用anime.js完全回调，但我无法按照我的意图行事。在线复制： https://jsfiddle.net/5mwbh9ok/6/

.heading span {
  position: relative;
display: inline-block;
white-space: pre;
opacity: 0;
}

我发现了这个类似的问题，但我无法实现超过1张幻灯片的幻灯片延迟： Fullpage.js. Adding a scroll delay

我想要完成的是在转到下一部分之前等待动画完成。

我非常感谢有关如何解决此问题的任何提示：）

Answer 1

You should cancel the scroll by returning false on the onLeave or onSlideLeave callback (depending in whether you use secions or slides).

Take a look at the docs here.

Then depending on the callbacks's direction parameter you can call $.fn.fullpage.moveSectionUp() or $.fn.fullpage.moveSectionDown. (or the respective horizontal methods if you use slides) whenever your animation finishes.

Answer 2

你必须禁用滚动直到动画完成后才能获得此效果，但我会避免滚动顶部＆＃34;。这对大多数人来说非常烦人，并且有可用性问题。

你可以从DOM中删除所有未来的幻灯片（或者只是用CSS隐藏它），并且只在最后一张幻灯片完成动画后添加它们。

您也可以隐藏每张幻灯片中的文字，直到介绍动画准备好开始。

fullpage.js等待anime.js动画完成后再转到下一部分

2 个答案: