javascript - fullpage.js 等待anime.js 动画完成，然后再进入下一部分

Question

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

当回调 afterLoad 被触发时，我正在运行动画(出现)。我的问题是，有时当用户滚动速度快于动画持续时间时，在离开时触发的下一个动画(隐藏)看起来不符合预期。我尝试使用 Anime.js 完整回调，但无法实现我的预期。在线复制: https://jsfiddle.net/5mwbh9ok/6/

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

我发现了这个问题，它是相似的，但我无法实现超过一张幻灯片的幻灯片延迟: Fullpage.js. Adding a scroll delay

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

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

Answer 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;
    },
});