Vue List Animation With Greensock Js Hooks: Wait For Leave To Finish Before Enter
Is there a way to get Vue to wait for elements to leave a list before new ones enter? At the moment, the animation for new elements entering the list plays at the same time as the
Solution 1:
It's a transition-group
, so every change to the array is a different animation. If you always add an element and then remove another one, you can achieve it using a setTimeout on enter
hook, having the same duration of SPEED
.
enter(el, done) {
window.setTimeout( () => {
var bar = $(el).children(".bar");
TweenMax.fromTo(bar, SPEED, {width: 0}, {width: $(el).attr("width") * 10, onComplete: done});
}, SPEED * 1000 )
},
I also suggest you to alter your array in the following way
swapBobDave() {
this.nodes.splice(1,1);
this.nodes.push({id: 3, value: 35, name: "Dave"});
},
Concerning the bar, it reachs width: 0
but there is padding: 10px
in the css. To fix it you can add margin directly to the text within, and remove padding on bar.
Hope it helps you.
Post a Comment for "Vue List Animation With Greensock Js Hooks: Wait For Leave To Finish Before Enter"