本文详解如何利用 fullPage.js 的 onLeave 回调与 CSS 动画控制，实现「当前节动画完成 → 再自动跳转至下一节」的链式滚动效果，避免所有节同时触发动画。
本文详解如何利用 fullpage.js 的 `onleave` 回调与 css 动画控制，实现「当前节动画完成 → 再自动跳转至下一节」的链式滚动效果，避免所有节同时触发动画。
在使用 fullPage.js 构建单页滚动网站时，常需为每节（section）添加个性化入场动画，并确保动画严格按滚动顺序执行：即用户触发滚动后，仅当前离开的节执行动画，动画完全结束后再平滑跳转至目标节。但原始代码中 $('.block').addClass('animate') 会一次性作用于所有 .block 元素，导致所有节动画同步启动，违背“逐节序列化”的交互预期。
要解决此问题，核心在于将动画控制粒度精确到当前操作的节，而非全局选择器。推荐采用动态内联样式方式，结合 destination.index 实时计算偏移量，替代静态 class 切换：
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(origin, destination, direction) {
// ✅ 精确作用于当前即将离开的 section 中的 .block
$(destination.item).find('.block').css('transform', `translateX(${(destination.index + 1) * 100}px)`);
// 清除上一次定时器，防止多次触发冲突
clearTimeout(timeoutId);
// 设置动画持续时间（需与 CSS transition 时长一致）
const animationDuration = 2000; // 与 .block 的 transition: all 2s 对齐
timeoutId = setTimeout(() => {
// 动画结束后，跳转至目标节（注意：destination.index 是 0 起始，moveTo 需 +1）
fullpage_api.moveTo(destination.index + 1);
}, animationDuration);
}
});对应 CSS 需确保 .block 元素具备可过渡的 transform 属性，且移除可能干扰的全局 animate 类：
.block {
width: 100px;
height: 100px;
background-color: #f00;
/* 关键：启用 transform 过渡，时长与 JS 中 timeout 严格一致 */
transition: transform 2s ease;
}
/* 移除 .block.animate 规则，改用 JS 动态设置 */⚠️ 注意事项：
- 时长一致性：JS 中 setTimeout 延迟必须等于 CSS transition-duration（如 2s → 2000ms），否则跳转时机错乱；
- 作用域隔离：务必使用 $(destination.item).find('.block') 定位当前节元素，禁用全局 $('.block')；
- 防重复触发：clearTimeout(timeoutId) 必不可少，避免快速连续滚动导致定时器堆积；
- 索引对齐：destination.index 从 0 开始，moveTo(n) 中 n 为 1 起始，故调用 moveTo(destination.index + 1)；
- 兼容性补充：若需支持旧浏览器，可回退至 margin-left 方案，但 transform 性能更优且无布局重排。
通过上述改造，动画将严格遵循「Section 1 → 动画 → 跳转 Section 2 → 动画 → 跳转 Section 3…」的线性流程，每个节的动画彼此独立、互不干扰，最终达成专业级的序列化滚动交互动效。
