javascript - Gsap 无法正常使用 typescript

Question

我正在使用 ssr 渲染在 nuxt.js 中编写应用程序。我有 gsap 的问题。我正在使用 typescript ，当我尝试使用 timeline.staggerTo() 方法时，我收到错误，即 TimelineMax 类型上不存在属性 staggerTo()。
我如何使用 gsap:
我已经用 yarn add gsap 安装了它
然后我从“gsap”导入了 TimelineMax
就这样
to() 工作例如但 staggerTo/from no。可能没有定义。有人知道我可以做什么来修复/解决它吗？
非常感谢帮助<3
一些代码

import Vue from "vue";

import { TweenMax, gsap, TimelineMax } from "gsap";

export default Vue.extend({
  mounted() {
    const timeline = new TimelineMax();
    timeline
      .fromTo(
        ".header__subtitle",
        1,
        { opacity: 0, translateY: -30 },
        { opacity: 1, translateY: 0 }
      )
      .staggerFrom(); //Property 'staggerFrom' does not exist on type 'TimelineMax'.Vetur(2339)
  }
});

Answer 1

我猜您没有使用具有最新 Typescript 声明的 GSAP 3 版本。 GSAP 中包含的 Typescript 定义在 3.3 版中得到了重大改进。 不要使用@types 声明 因为它们非常陈旧和过时。我认为升级您的 GSAP 版本并卸载 @types 声明应该可以解决您的问题，因为 TimelineMax 为 GSAP 3 中的 .timeline() 提供了便利。
话虽如此，我们 GreenSock 建议您使用 GSAP 3 formatting .我会像这样格式化你的代码:

import Vue from "vue";

import { gsap } from "gsap";

export default Vue.extend({
  mounted() {
    const timeline = gsap.timeline()
      .fromTo(".header__subtitle", {
        opacity: 0,
        translateY: -30
      }, {
        duration: 1, 
        opacity: 1, 
        translateY: 0,
        stagger: 0.2
      })
  }
});

有关交错的更多信息，请查看 the stagger documentation .
仅供引用，您更有可能通过 on the GreenSock forums 获得更快的响应.