本文详解如何利用 fullPage.js 的 onLeave 回调，在每次页面切换前逐节执行独立动画（如平移、缩放），确保动画完成后再跳转目标区块，避免所有区块同时动画的常见问题。
本文详解如何利用 fullpage.js 的 `onleave` 回调，在每次页面切换前**逐节执行独立动画**（如平移、缩放），确保动画完成后再跳转目标区块，避免所有区块同时动画的常见问题。
在使用 fullPage.js 构建单页滚动网站时，一个常见需求是：用户触发滚动后，当前区块先执行一段 CSS 动画（例如元素位移），待动画完全结束，再平滑过渡到目标 section。但若直接对全局选择器（如 $('.block')）统一添加 .animate 类，会导致所有 section 中的 .block 元素同时启动动画，违背“逐节顺序执行”的设计意图。
根本原因在于：.animate 类绑定的是全局 CSS 过渡规则（如 transition: all 2s ease），一旦类被批量添加，所有匹配元素立即响应，无法按当前滚动上下文差异化控制。
✅ 正确解法是：放弃静态 class 切换，改用内联样式动态设置变换属性，使每个 section 的动画状态仅由当前 destination.index 决定，实现精准、隔离的逐节控制。
以下是优化后的核心代码逻辑：
var delay = 1000; // 动画持续时间（ms），需与 CSS transition 时间一致
var timeoutId;
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(origin, destination, direction) {
// ✅ 关键修改：为当前即将离开的 section 中的 .block 设置唯一动画值
// 方式一：使用 margin-left（兼容性好）
$('.section').eq(origin.index).find('.block').css('margin-left', (destination.index * 100) + 'px');
// 方式二（推荐）：使用 transform（性能更优，启用 GPU 加速）
// $('.section').eq(origin.index).find('.block').css('transform', `translateX(${destination.index * 100}px)`);
// 清除上一次延时，防止快速连续滚动导致冲突
clearTimeout(timeoutId);
// 延迟执行 moveTo，确保动画有足够时间完成
timeoutId = setTimeout(function() {
fullpage_api.moveTo(destination.index + 1);
}, delay);
// ⚠️ 注意：此处 return false 是必须的！
// 否则 fullPage.js 会立即执行默认滚动，覆盖你的自定义动画流程
return false;
}
});配套 CSS 需精简并聚焦于单个元素的过渡效果：
.section {
text-align: center;
font-size: 3em;
font-family: Arial, sans-serif;
}
.block {
width: 100px;
height: 100px;
background-color: #f00;
/* ✅ 移除 .animate 类，直接定义过渡 */
transition: transform 1s ease, margin-left 1s ease;
/* 若仅用 transform，可简化为：transition: transform 1s ease; */
}? 关键注意事项：
- 必须 return false：这是 fullPage.js 的机制要求——返回 false 会阻止默认滚动行为，让你完全掌控后续流程；遗漏此行将导致动画与自动滚动竞争，效果不可控。
- 精准定位元素：使用 $('.section').eq(origin.index).find('.block') 确保只操作当前正在离开的 section 中的元素，而非全页面所有 .block。
- 动画时长同步：JavaScript 中的 delay 值（如 1000）必须严格等于 CSS 中 transition-duration（如 1s），否则会出现动画未完成就跳转，或跳转后动画才开始的错位。
- 性能优先选 transform：相比 margin-left，transform: translateX() 触发 GPU 加速，动画更流畅，且不影响文档流，是现代 Web 动画的首选方案。
- 清理定时器：clearTimeout(timeoutId) 防止用户快速连续滚动时，前一个 setTimeout 仍执行并错误触发 moveTo，造成跳转错乱。
通过以上改造，即可实现严格的“滚动 → 当前节动画 → 动画完成 → 跳转目标节”链式流程，每一节的动画效果都独立、可控、可预测，大幅提升交互专业度与用户体验。
