Question

我正在用ssr渲染在nuxt.js中编写应用程序。我对gsap有问题。我正在使用打字稿，当我尝试使用timeline.staggerTo（）方法时，我收到错误消息，说timelineMax类型上不存在staggerTo（）属性。

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

仅此而已

例如，

to（）有效，但staggerTo /从否开始。可能对此没有定义。有人知道我可以做些什么来解决/解决它吗？

非常感谢帮助<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

好吧，为了创建交错，只需添加 {stagger：0.1} in fromVars / toVars

祝您有美好的一天：）

Answer 2

我猜您不是在使用具有最新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();
    timeline
      .fromTo(
        ".header__subtitle",
        { opacity: 0, translateY: -30 },
        { duration: 1, opacity: 1, translateY: 0, stagger: 0.2 }
      )
  }
});

有关交错的更多信息，请查看the stagger documentation。

仅供参考，您更有可能比on the GreenSock forums获得更快的响应。

Gsap无法与打字稿一起正常使用

2 个答案: