fullpage.js页面切换延迟功能失效，请求实现动画可见的切换延迟

你遇到的核心问题是重复初始化fullpage加上onLeave回调里的异步逻辑处理不当，导致延迟切换的效果没有生效。我来帮你拆解问题并给出修复方案：

问题分析 #

1. 你先后调用了$('#fullpage').fullpage(...)和new fullpage('#fullpage', ...)，这会导致第二次初始化覆盖第一次的配置，甚至引发内部逻辑冲突。
2. onLeave里的return animationIsFinished是同步执行的，初始状态下animationIsFinished为false，虽然你在定时器里把它改成true，但此时return已经执行完毕，既没法阻止默认跳转，也没法触发延迟后的手动跳转。

修复后的代码 #

// 只保留一次fullpage初始化（官方推荐使用new fullpage的方式）
new fullpage('#fullpage', {
  navigation: true,
  anchors: ['code', 'eng'],
  onLeave: function(origin, destination, direction) {
    const delay = 2000;
    let timeoutId;

    // 先给目标元素添加动画类
    $('.footage').addClass('footage2');

    // 清理之前的定时器，避免快速切换页面时出现多个延迟跳转
    if (timeoutId) clearTimeout(timeoutId);

    // 延迟指定时间后执行页面跳转
    timeoutId = setTimeout(function() {
      fullpage_api.moveTo(destination.index + 1);
    }, delay);

    // 返回false阻止fullpage默认的立即跳转行为
    return false;
  }
});

关键细节说明 #

• 移除重复初始化：确保页面中只有一个fullpage实例，避免配置冲突和逻辑混乱。
• return false：这是阻止fullpage默认页面切换的核心，让我们能完全接管跳转时机。
• 定时器清理：每次触发页面切换时都清理之前的定时器，防止用户快速操作时出现多个延迟跳转的叠加问题。
• 动画类优先执行：先给元素加上动画类再启动延迟，确保用户能看到完整的动画过程后再切换页面。

如果你的footage2类包含CSS动画，建议让动画时长不超过设置的delay值，这样动画结束后刚好触发页面切换，体验更流畅。

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