如何让fullpage.js等待anime.js动画完成后再切换至下一节？

我来帮你搞定这个快速滚动导致动画不符合预期的问题～核心思路是阻止fullpage的默认滚动行为，等待当前节的隐藏动画完成后，再手动触发滚动到下一节，同时用状态变量避免并发动画冲突。

具体实现步骤 #

1. 添加动画状态控制变量
   先声明一个全局变量来标记当前是否有动画在执行，防止快速滚动时触发多次动画：

   let isAnimating = false;
   

2. 修改fullpage.js的初始化配置
   重点调整onLeave和afterLoad两个回调函数，控制滚动时机和动画执行：

   $('#fullpage').fullpage({
     afterLoad: function(origin, destination, direction) {
       // 先停止所有残留的动画，避免干扰当前节的显示效果
       anime.remove('.heading span');
       
       // 执行当前目标节的显示动画
       anime({
         targets: destination.item.querySelector('.heading span'),
         opacity: 1,
         translateY: 0,
         delay: anime.stagger(100), // 文字逐个显示的延迟
         duration: 800,
         easing: 'easeOutExpo'
       });
     },
     onLeave: function(origin, destination, direction) {
       // 如果当前有动画在执行，直接阻止滚动
       if (isAnimating) return false;
       
       isAnimating = true;
       
       // 执行当前离开节的隐藏动画
       anime({
         targets: origin.item.querySelector('.heading span'),
         opacity: 0,
         translateY: 20, // 配合CSS初始状态，让隐藏动画更自然
         delay: anime.stagger(100, {reverse: true}), // 文字从后往前消失
         duration: 600,
         easing: 'easeInExpo',
         complete: function() {
           // 动画完成后，手动触发滚动到目标节
           if (direction === 'down') {
             $.fn.fullpage.moveSectionDown();
           } else {
             $.fn.fullpage.moveSectionUp();
           }
           // 重置动画状态，允许下一次滚动
           isAnimating = false;
         }
       });
       
       // 阻止fullpage的默认滚动行为，等待动画完成后再手动执行
       return false;
     }
   });
   

3. 调整CSS初始状态
   为了让隐藏动画的初始状态更合理，建议给.heading span添加初始位移：

   .heading span {
     position: relative;
     display: inline-block;
     white-space: pre;
     opacity: 0;
     transform: translateY(20px); /* 和动画中的位移对应 */
   }
   

关键逻辑说明 #

• 状态锁isAnimating：确保同一时间只有一个动画在执行，避免快速滚动时动画叠加导致的混乱。
• 手动触发滚动：在onLeave中返回false阻止默认滚动，等隐藏动画完成后调用fullpage的滚动API，保证动画执行完整。
• 动画清理：在afterLoad中用anime.remove()停止所有相关元素的残留动画，避免上一节的动画影响当前节的显示。

额外注意事项 #

• 如果你的项目包含横向幻灯片（slide），需要把滚动方法换成$.fn.fullpage.moveSlideRight()或$.fn.fullpage.moveSlideLeft()，并调整方向判断逻辑。
• 可以根据需求调整动画的时长、延迟和缓动函数，平衡动画效果和用户体验。

内容的提问来源于stack exchange，提问作者engray