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

Question

我正在使用 ssr 渲染在 nuxt.js 中编写应用程序。我有 gsap 的问题。我正在使用打字稿，当我尝试使用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 格式。我会像这样格式化你的代码：import Vue from "vue";import { gsap } from "gsap";export default Vue.extend({&nbsp; mounted() {&nbsp; &nbsp; const timeline = gsap.timeline()&nbsp; &nbsp; &nbsp; .fromTo(".header__subtitle", {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0,&nbsp; &nbsp; &nbsp; &nbsp; translateY: -30&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; duration: 1,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; translateY: 0,&nbsp; &nbsp; &nbsp; &nbsp; stagger: 0.2&nbsp; &nbsp; &nbsp; })&nbsp; }});有关交错的更多信息，请查看交错文档。仅供参考，您更有可能在 GreenSock 论坛上获得更快的响应。

Answer 2

好的，为了创建交错，只需在 fromVars/toVars 添加 {stagger: 0.1}祝你今天过得愉快 ：）