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

【问题标题】：fullpage.js wait for anime.js animation complete before moving to next sectionfullpage.js 等待anime.js 动画完成，然后再转到下一部分
【发布时间】：2018-02-02 14:46:43
【问题描述】：

我正在为我的新项目使用 jquery fullpage 和动漫 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

我想要完成的是等待动画完成，然后再转到下一部分。

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

【问题讨论】：

标签： javascript fullpage.js anime.js

【解决方案1】：

您应该通过在 onLeave 或 onSlideLeave 回调中返回 false 来取消滚动（取决于您使用的是切片还是幻灯片）。

查看文档here。

然后根据回调的direction 参数，您可以调用$.fn.fullpage.moveSectionUp() 或$.fn.fullpage.moveSectionDown。（或者如果您使用幻灯片，则使用相应的水平方法）每当您的动画完成时。

这是一个例子： https://jsfiddle.net/alvarotrigo/o5ak4mgd/5/

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = new Date().getTime();

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;

            fullpage_api.moveTo(destination.index + 1);
        }, delay);

        return animationIsFinished;
    },
});

【讨论】：

【解决方案2】：

您必须在动画完成之前禁用滚动才能获得此效果，但我会避免“滚动劫持”。这对大多数人来说很烦人，并且存在可用性问题。

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

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

【讨论】：