Vue.js:JS-动画钩与GSAP - 离开动画不工作
问题描述:
我想用输入/在vue.js离开过渡,使用内置的JavaScript挂钩转变: https://vuejs.org/v2/guide/transitions.html#JavaScript-HooksVue.js:JS-动画钩与GSAP - 离开动画不工作
我的动画选择的库GSAP:https://greensock.com/
两个,我进入功能enter: function(el, done) {}
和我的离去,功能leave: function(el, done) {}
正确调用。
输入动画工作得很好 - 但是假动画没有做任何事情。
我想这是一个GSAP相关的事情,我还不明白。我尝试重置动画并清除动画元素的内联样式。没有帮助。
这里是codepen: https://codepen.io/Sixl/pen/oGwOKW?editors=0011
答
这里有一个固定的版本:https://codepen.io/GreenSock/pen/veJGmR?editors=0010
我发现了几个问题:
- 你被调用完成()立即,而不是等待动画去完成。我刚把它移到了onComplete回调函数中。
- 您创建了一个单独的时间轴,您将所有动画添加到该时间轴上,但在这种情况下这不是很合适,因为它不是线性的 - 点击可能随时发生。因此,时间轴上的播放头到达第一个动画的末尾,然后当您在最后放置一个新的动画时(很久以后,当有人点击时),播放头将已经经过您放置它的那个位置,导致它在下一个渲染(适当地)上跳到最后。在这里简单地使用TweenMax会更清洁。或者每次点击时都可以创建一个新的TimelineLite(不用担心 - 速度很快)。
-
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
如果您有任何问题,请不要犹豫被使用GreenSock论坛摆动。 https://greensock.com/forums/这里有一个专注于帮助GSAP问题的人群。
快乐补间!