Gsap 无法与打字稿一起正常工作答案

【问题标题】：Gsap not working properly with typescriptGsap 无法与打字稿一起正常工作
【发布时间】：2020-10-12 18:10:15
【问题描述】：

我正在使用 ssr 渲染在 nuxt.js 中编写应用程序。我有 gsap 的问题。我正在使用打字稿，当我尝试使用timeline.staggerTo() 方法时出现错误，即TimelineMax 类型上不存在属性staggerTo()。

我如何使用 gsap：我已经用 yarn add gsap 安装了它然后我从“gsap”导入了 TimelineMax

就是这样

to() 例如有效，但 staggerTo / from no。可能没有对此的定义。有人知道我可以做什么来修复/解决它吗？

非常感谢您的帮助

一些代码

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

【问题讨论】：

什么在这里不起作用？
我的应用程序无法编译，因为我在使用 staggerTo 时遇到错误，它不存在
您使用的是哪个版本的 GSAP？我认为 v3 中不存在这些方法？
我正在使用 3.3.4
我似乎在 GSAP Docs greensock.com/docs/search/stagger987654321@ 上找不到这些方法

标签： javascript typescript vue.js nuxt.js gsap

【解决方案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 更快的回复。

【讨论】：

【解决方案2】：

好的，所以为了创建交错只需添加 {stagger: 0.1} in fromVars/toVars

祝你有美好的一天:)

【讨论】：

请注意，stagger 属性应包含在补间的最后一个参数中（.from() 和 .to() 的唯一参数，.fromTo() 的第二个参数）。