Vue.js：与GSAP的JS-Animation-Hooks - 让动画无效

Question

我想在 vue.js 中使用进入/离开过渡，使用内置的javascript钩子进行过渡： https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

我选择的动画库是 GSAP ：https://greensock.com/

我的输入函数enter: function(el, done) {}和我的离开函数leave: function(el, done) {}都被正确调用。

输入动画效果很好 - 但是假动画不会做任何事情。

我想这是与GSAP相关的事情，我还不明白。我尝试重置动画并清除动画元素的内嵌样式。没有帮助。

这是codepen： https://codepen.io/Sixl/pen/oGwOKW?editors=0011

Answer 1

以下是固定版本：https://codepen.io/GreenSock/pen/veJGmR?editors=0010

我注意到了一些问题：

1. 您立即调用done（）而不是等待动画完成。我只是将它移动到onComplete回调。
2. 您创建了一个添加所有动画的时间轴，但在这种情况下这不太合适，因为它不是线性的 - 点击可能随时发生。因此，时间轴上的播放头到达第一个动画的结尾，然后当你在结束时放置一个新的播放头（很久以后，当有人点击时），播放头已经超过你放置它的那个地方，导致它在下一次渲染（适当）时跳转到结尾。在这里简单地使用TweenMax更简洁。或者你可以在每次点击时创建一个新的TimelineLite（不要担心 - 它很快）。

-

TweenMax.to(el, 0.5, {
  x: 150,
  autoAlpha: 0,
  scale: 0.5,
  onComplete: done
});

如果您还有其他问题，请随时访问GreenSock论坛。 https://greensock.com/forums/那里有一个伟大的社区，专注于帮助人们处理GSAP问题。

快乐的补间！