如何在GreenSock自定义加载动画中添加文本消失延迟？

我使用GreenSock创建了一个自定义加载动画，实现了从1924到2024的数值计数及文本填充效果。现在希望文本填充完成后延迟1-2秒再结束动画，以便用户看清加载内容。以下是我的实现代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/CustomEase.min.js"></script>

<script>

// Pre-loader
// Variables
// Custom ease
let customEase =
  "M0,0,C0,0,0.13,0.34,0.238,0.442,0.305,0.506,0.322,0.514,0.396,0.54,0.478,0.568,0.468,0.56,0.522,0.584,0.572,0.606,0.61,0.719,0.714,0.826,0.798,0.912,1,1,1,1";
// Counter start
let counter = {
  value: 1924
};
// Duration
let loaderDuration = 4;

// Duration, and counter start - if not a first time visit in this tab
if (sessionStorage.getItem("visited") !== null) {
  loaderDuration = 3;
  counter = {
    value: 1924
  };
}
sessionStorage.setItem("visited", "true");

function updateLoaderText() {
  let progress = Math.round(counter.value);
  $(".page-loader_text").text(progress);
}
function endLoaderAnimation() {
  $(".page-loader_trigger").click();
}

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);

</script>

有两种简洁的实现方式，任选其一即可：

方法一：修改结束动画函数 #

直接在endLoaderAnimation函数中用setTimeout包裹结束逻辑，这样时间线完成后会先等待指定时长再触发结束：

function endLoaderAnimation() {
  // 延迟1500毫秒（1.5秒），可调整为1000-2000之间的数值
  setTimeout(() => {
    $(".page-loader_trigger").click();
  }, 1500);
}

方法二：给GSAP时间线添加延迟 #

在时间线的最后追加一个空的延迟动画，通过延长时间线整体时长实现延迟效果，无需修改原结束函数：

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({}, {duration: 1.5});

内容的提问来源于stack exchange，提问作者Andrey voronov