Gsap 不能正常使用打字稿
Gsap not working properly with typescript
我正在使用 ssr 渲染在 nuxt.js 中编写应用程序。我对 gsap 有疑问。我正在使用打字稿,当我尝试使用 timeline.staggerTo() 方法时,出现错误 属性 staggerTo() 在 TimelineMax 类型上不存在。
我如何使用 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)
}
});
好的,为了创建交错只需添加
{stagger: 0.1} in fromVars/ toVars
祝你有愉快的一天:)
我猜您使用的 GSAP 3 版本没有最新的 Typescript 声明。 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 上获得更快的响应。
我正在使用 ssr 渲染在 nuxt.js 中编写应用程序。我对 gsap 有疑问。我正在使用打字稿,当我尝试使用 timeline.staggerTo() 方法时,出现错误 属性 staggerTo() 在 TimelineMax 类型上不存在。
我如何使用 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)
}
});
好的,为了创建交错只需添加 {stagger: 0.1} in fromVars/ toVars
祝你有愉快的一天:)
我猜您使用的 GSAP 3 版本没有最新的 Typescript 声明。 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 上获得更快的响应。