Vue.js：JS-动画钩与GSAP - 离开动画不工作

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. 你被调用完成（）立即，而不是等待动画去完成。我刚把它移到了onComplete回调函数中。
2. 您创建了一个单独的时间轴，您将所有动画添加到该时间轴上，但在这种情况下这不是很合适，因为它不是线性的 - 点击可能随时发生。因此，时间轴上的播放头到达第一个动画的末尾，然后当您在最后放置一个新的动画时（很久以后，当有人点击时），播放头将已经经过您放置它的那个位置，导致它在下一个渲染（适当地）上跳到最后。在这里简单地使用TweenMax会更清洁。或者每次点击时都可以创建一个新的TimelineLite（不用担心 - 速度很快）。

-

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

如果您有任何问题，请不要犹豫被使用GreenSock论坛摆动。 https://greensock.com/forums/这里有一个专注于帮助GSAP问题的人群。

快乐补间！