本文详解如何利用 fullPage.js 的 onLeave 回调与 CSS 动画配合，实现「当前区块动画完成 → 再跳转到目标区块」的链式交互动效，避免所有区块同时动画的问题。
本文详解如何利用 fullpage.js 的 `onleave` 回调与 css 动画配合，实现「当前区块动画完成 → 再跳转到目标区块」的链式交互动效，避免所有区块同时动画的问题。
在使用 fullPage.js 构建单页滚动应用时，常需为内容添加过渡动画以增强用户体验。但若直接在 onLeave 中统一添加 .animate 类（如 $('.block').addClass('animate')），会导致所有匹配元素立即触发相同动画——即各 section 中的 .block 同时位移，违背“逐节顺序动画”的设计意图。
根本原因在于：CSS 动画（如 transform: translateX(100px)）依赖类名切换触发，而 addClass('animate') 是批量操作，不区分当前活跃 section，也未绑定具体目标索引。
✅ 正确解法是：动态计算并直接设置每个区块的动画状态，而非依赖静态 class 切换。推荐使用 jQuery 的 .css() 方法实时注入内联样式，确保动画参数与当前滚动目标严格对应：
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(origin, destination, direction) {
// 清除上一次定时器，防止多次触发冲突
clearTimeout(timeoutId);
// ✅ 关键修改：为当前目标 section 中的 .block 设置唯一偏移量
// 使用 destination.index 确保每节动画位置递增（0→100px, 1→200px...）
$('.section').eq(destination.index).find('.block').css({
'transform': `translateX(${(destination.index + 1) * 100}px)`
});
// 延迟执行跳转，确保动画有足够时间完成（此处 1s 对应 CSS transition 2s，需按需调整）
timeoutId = setTimeout(() => {
fullpage_api.moveTo(destination.index + 1);
}, 1000);
}
});配套 CSS 需保留平滑过渡声明（注意：transition 必须作用于原始元素，而非仅 .animate 类）：
.block {
width: 100px;
height: 100px;
background-color: #f00;
/* ✅ transition 定义在基础样式中，确保内联 transform 变更可被动画化 */
transition: transform 2s ease;
}⚠️ 注意事项：
- 动画时长与延迟需严格对齐：setTimeout 的毫秒值（如 1000）应 ≥ CSS transition-duration（如 2s），否则跳转可能早于动画结束。建议设为 transition-duration * 1000 + 100 作为安全余量。
- 精准选择目标元素：使用 $('.section').eq(destination.index).find('.block') 替代全局 $('.block')，避免跨 section 干扰。
- 避免重复触发：clearTimeout(timeoutId) 必不可少，尤其在快速连续滚动时，可防止旧定时器错误触发后续跳转。
- 兼容性提示：若需支持旧版浏览器，transform 可补充 -webkit-transform；纯位移动画优先用 transform 而非 margin-left，性能更优且不触发重排。
通过此方案，用户滚动时将严格遵循：
? 触发 onLeave → 计算目标节偏移 → 单独更新该节 .block 的 transform → 浏览器自动播放过渡动画 → 动画结束后执行 moveTo → 进入下一节。
整个流程解耦清晰、可控性强，完美实现“一节一动画、动画完再跳转”的专业交互动效。
