本文介绍如何使用 GSAP 时间轴的 delay() 方法，在自定义加载动画中为文字填充完成后的消失效果添加 1–2 秒停留时间，确保用户清晰感知动态过程。
本文介绍如何使用 gsap 时间轴的 `delay()` 方法，在自定义加载动画中为文字填充完成后的消失效果添加 1–2 秒停留时间，确保用户清晰感知动态过程。
在你当前的 GSAP 时间轴（gsap.timeline）中，文字填充动画（.page-loader_text-fill 的高度变化）与计数器动画是同步启动的（通过 position: 0 实现），但你希望文字“填满后暂停片刻再消失”——这并非延迟整个时间轴，而是在填充动画结束后、消失动画开始前插入一段等待间隔。
关键在于：GSAP 的 .delay() 是作用于单个动画实例的方法，而非直接写在 to() 后面如 to.delay(2)（该写法错误，会报错）。正确做法是：将“消失动画”（例如隐藏文字或重置高度）作为独立动画，并用相对位置参数（如 "+=2"）指定其在前一个动画结束后延迟执行。
以下是修正后的核心代码段（已整合进原逻辑，移除错误写法，增强可维护性）：
let tl = gsap.timeline({
onComplete: endLoaderAnimation
});
// 第一阶段：计数器递增 + 文字填充（同步）
tl.to(counter, {
value: 2024,
onUpdate: updateLoaderText,
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
});
tl.to(".page-loader_text-fill", {
height: "150%",
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
}, 0); // 与上一动画同时开始
// 第二阶段：延迟 1.5 秒后，执行“消失”动作（例如收缩高度并隐藏）
tl.to(".page-loader_text-fill", {
height: "0%",
duration: 0.6,
ease: "power2.out"
}, "+=1.5"); // ⭐ 关键："+=1.5" 表示在上一动画结束后等待 1.5 秒再启动
// 可选：同步淡出文字容器（提升视觉连贯性）
tl.to(".page-loader_text", {
opacity: 0,
duration: 0.4,
ease: "power2.out"
}, "<"); // "<" 表示与上一动画同时开始（即与 height 收缩同步）✅ 注意事项：
- "+=X" 是 GSAP 时间轴中实现相对延迟的标准语法，表示“在前一个动画结束时刻 + X 秒后开始”；
- 避免使用 setTimeout 或 .delay() 直接链式调用（如 to(...).delay(2)），因 delay() 不返回动画实例，且 GSAP v3 中已弃用该链式用法；
- 若需更灵活控制（如根据用户交互动态调整延迟），可将 tl 赋值给变量后调用 tl.delay(2) —— 但这会延迟整个时间轴的起始，不符合“填充后停留”的需求；
- 建议为消失动画添加缓动（如 "power2.out"）以避免生硬突变，提升专业感。
通过上述调整，文字将在 2024 完全显示并填满容器后，静止 1.5 秒，再平滑收起——既满足可读性要求，又保持 GSAP 动画的精确时序与流畅体验。
