本文介绍如何使用 GSAP 时间轴（Timeline）的 delay() 方法，在自定义加载动画中为文字填充完成后的消失阶段添加 1–2 秒可见停留时间，确保用户能清晰识别动态内容。
本文介绍如何使用 gsap 时间轴（timeline）的 `delay()` 方法，在自定义加载动画中为文字填充完成后的消失阶段添加 1–2 秒可见停留时间，确保用户能清晰识别动态内容。
在你当前的 GSAP 时间轴中，文字填充（.page-loader_text-fill 高度变化）与计数器动画是同步执行的，但缺少“保持显示 → 再消失”这一关键体验环节。直接在 .to() 动画后追加 .delay() 并不能生效——因为 delay() 是 Timeline 实例的方法，而非单个 .to() 的链式调用属性；且原答案中的 to.delay(2) 语法错误（to 未定义），容易引发运行时异常。
✅ 正确做法是：在填充动画结束后，插入一个带延迟的“隐藏”动作。推荐两种专业、可维护的实现方式：
✅ 方案一：使用 tl.to() + delay 参数（推荐）
在填充动画完成后，新增一个针对文字容器的透明度或 visibility 动画，并通过第四个参数指定起始时间偏移（即延迟）：
// 原有填充动画（保持不变）
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);
// ✅ 新增：2秒延迟后淡出文字（推荐视觉柔和）
tl.to(".page-loader_text", {
opacity: 0,
duration: 0.5,
ease: "power2.out"
}, "+=2"); // "+=2" 表示在上一个动画结束之后等待 2 秒再执行
? "+=2" 是 GSAP 时间轴中标准的相对时间偏移写法，比硬编码绝对时间点更健壮，自动继承前序动画总时长。
✅ 方案二：使用 tl.add() + delay 配置
若需更精细控制（例如延迟后执行函数而非动画），可用 tl.add() 显式插入延迟：
// 在填充动画全部结束后，延迟 2 秒再触发隐藏逻辑
tl.add(() => {
$(".page-loader_text").css("visibility", "hidden");
}, "+=2");
⚠️ 注意事项
- 不要使用 setTimeout() 或原生 delay() 混搭 GSAP 时间轴，会破坏时间轴的统一控制与暂停/重播能力；
- 确保 .page-loader_text 元素本身未被 display: none 过早隐藏，否则 opacity: 0 动画不可见；
- 若需彻底移除元素，可在 opacity: 0 动画 onComplete 中调用 tl.set(..., { display: "none" })；
- 所有 GSAP 动画建议显式指定 duration 和 ease，避免依赖默认值导致行为不一致。
通过以上任一方案，即可让数字文字在填满至 2024 后稳定显示 2 秒，再平滑淡出，显著提升用户感知与品牌专业度。
