GSAP onComplete 立即在 Nuxt 中触发

Question

我正在使用 Nuxt，但我不明白为什么我的 onComplete 调用立即触发，而不是等待动画完成：

我从这段代码开始，从 onComplete 调用我的方法，因为这就是你在 Nuxt 中调用方法的方式：

this.gsapTimeline = this.gsap
        .timeline({
          paused: true,
          onComplete: this.callShowTimelineFunction(),
        })
        .to("#someID", {
          opacity: 1,
          duration: 2,
        });

但是该语法将导致“callShowTimelineFunction”立即触发。从方法调用中删除括号“()”...在这种情况下...直到整个动画完成后才会触发该方法...如下所示：

this.gsapTimeline = this.gsap
        .timeline({
          paused: true,
          onComplete: this.callShowTimelineFunction,
        })
        .to("#someID", {
          opacity: 1,
          duration: 2,
        });

我刚刚在 GSAP 上偶然发现了这篇文章。正如优雅海鸥所解释的：

请注意，您需要执行 onComplete: functionName，而不是 onComplete: functionName() 因为这将立即运行该函数。

Answer 1

答案：如果你的 onComplete 立即触发，你可能使用了错误的语法来调用你的 Nuxt 方法。

要从 GSAP 时间轴中的 onComplete 正确调用您的方法，您需要执行 onComplete: functionName，而不是 onComplete: functionName()，因为这将立即运行该函数。