Vue.js : JS-Animation-Hooks with GSAP - 让动画不工作
Vue.js : JS-Animation-Hooks with GSAP - leave animation not working
我想在 vue.js 中使用 enter/leave 转换 ，使用内置 javascript 过渡挂钩：
https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
我选择的动画库是 GSAP：https://greensock.com/
我的输入函数 enter: function(el, done) {} 和离开函数 leave: function(el, done) {} 都被正确调用了。
进入动画效果很好 — 但离开动画什么也没做。
我想这是一个我还不明白的与GSAP相关的东西。我尝试重置动画并清除动画元素的内联样式。没有帮助。
这是一个固定版本：https://codepen.io/GreenSock/pen/veJGmR?editors=0010
我注意到了一些问题：
- 您是立即调用 done() 而不是等待动画完成。我只是将其移至 onComplete 回调。
- 您创建了一个要添加所有动画的时间轴，但这在这种情况下不太合适，因为它不是线性的——点击可能随时发生。所以时间轴上的播放头到达第一个动画的末尾，然后当你在末尾放置一个新的时（很久以后，当有人点击时），播放头已经远远超过了你放置它的那个位置，导致它跳到下一个渲染的末尾（适当地）。在这里简单地使用 TweenMax 更简洁。或者您可以在每次点击时创建一个新的 TimelineLite（不用担心 - 它很快）。
--
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
如果您有任何问题，请随时访问 GreenSock 论坛。 https://greensock.com/forums/ 那里有一个很棒的社区，专注于帮助人们解决 GSAP 问题。
补间快乐！
我想在 vue.js 中使用 enter/leave 转换 ，使用内置 javascript 过渡挂钩： https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
我选择的动画库是 GSAP：https://greensock.com/
我的输入函数 enter: function(el, done) {} 和离开函数 leave: function(el, done) {} 都被正确调用了。
进入动画效果很好 — 但离开动画什么也没做。
我想这是一个我还不明白的与GSAP相关的东西。我尝试重置动画并清除动画元素的内联样式。没有帮助。
这是一个固定版本：https://codepen.io/GreenSock/pen/veJGmR?editors=0010
我注意到了一些问题：
- 您是立即调用 done() 而不是等待动画完成。我只是将其移至 onComplete 回调。
- 您创建了一个要添加所有动画的时间轴，但这在这种情况下不太合适，因为它不是线性的——点击可能随时发生。所以时间轴上的播放头到达第一个动画的末尾，然后当你在末尾放置一个新的时（很久以后，当有人点击时），播放头已经远远超过了你放置它的那个位置，导致它跳到下一个渲染的末尾（适当地）。在这里简单地使用 TweenMax 更简洁。或者您可以在每次点击时创建一个新的 TimelineLite（不用担心 - 它很快）。
--
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
如果您有任何问题，请随时访问 GreenSock 论坛。 https://greensock.com/forums/ 那里有一个很棒的社区，专注于帮助人们解决 GSAP 问题。
补间快乐！