Nuxt中GSAP的onComplete回调立即触发问题排查与解决

在使用Nuxt框架开发时，遇到GSAP时间线的onComplete回调函数会立即触发，而非等待动画执行完成后再调用的问题。

错误写法（导致回调立即执行） #

this.gsapTimeline = this.gsap
  .timeline({
    paused: true,
    onComplete: this.callShowTimelineFunction(), // 带括号的写法会直接执行函数
  })
  .to("#someID", {
    opacity: 1,
    duration: 2,
  });

上述代码中，onComplete赋值时使用this.callShowTimelineFunction()，会直接调用函数并将返回值传给onComplete，导致回调在时间线初始化阶段就立即执行，完全不符合动画完成后触发的预期。

正确写法（动画完成后触发回调） #

this.gsapTimeline = this.gsap
  .timeline({
    paused: true,
    onComplete: this.callShowTimelineFunction, // 传递函数引用，不带括号
  })
  .to("#someID", {
    opacity: 1,
    duration: 2,
  });

移除函数调用的括号后，仅传递函数引用给onComplete，GSAP会在动画执行完成后自动调用该函数，符合预期逻辑。

问题原因说明 #

根据GSAP社区用户elegantseagulls的提示：onComplete需要使用functionName的形式传递函数引用，而非functionName()——后者会在赋值时立即执行函数，而非将函数作为回调等待动画完成后触发。

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