Vue.js: JS-Animations-Hooks mit GSAP - lassen Animation nicht funktioniert

Question

ich verwenden möchten betreten/verlassen Übergänge in vue.js, im eingebauten mit JavaScript Haken für Übergänge: https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

Meine Animation Bibliothek der Wahl ist GSAP: https://greensock.com/

Beide, meine Eingabe Funktion enter: function(el, done) {} und meine Erlaubnis Funktion leave: function(el, done) {} richtig bezeichnet.

Die Enter-Animation funktioniert gut - aber die Verlassen-Animation tut nichts.

Ich denke, es ist eine GSAP verwandte Sache, die ich noch nicht verstehe. Ich habe versucht, die Animation zurückzusetzen und die Inline-Stile des animierten Elements zu löschen. Hat nicht geholfen. Hier

ist die codepen: https://codepen.io/Sixl/pen/oGwOKW?editors=0011

Answer 1

Hier ist eine feste Version: https://codepen.io/GreenSock/pen/veJGmR?editors=0010

bemerkte ich ein paar Probleme:

1. Sie forderten getan() sofort anstatt zu warten, für die Animation fertigstellen. Ich habe es gerade zu einem onComplete-Callback verschoben.
2. Sie haben eine einzelne Zeitleiste erstellt, der Sie alle Ihre Animationen hinzugefügt haben, aber das ist in diesem Fall nicht sehr passend, da es keine lineare Sache ist - die Klicks könnten jederzeit passieren. Der Abspielkopf auf der Timeline erreicht also das Ende der ersten Animation, und wenn Sie dann am Ende eine neue platzieren (viel später, wenn jemand klickt), wäre der Abspielkopf bereits weit über die Stelle hinaus, an der Sie ihn platzieren. wodurch es beim nächsten Rendering (entsprechend) zum Ende springt. Es ist sauberer, stattdessen einfach einen TweenMax zu verwenden. Oder Sie können bei jedem Klick eine neue TimelineLite erstellen (keine Sorge - es ist schnell).

-

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

Wenn Sie weitere Fragen haben, zögern Sie nicht von den GreenSock Foren zu schwingen. https://greensock.com/forums/ Hier gibt es eine großartige Community, die sich darauf konzentriert, Menschen mit GSAP-Fragen zu helfen.

Happy Tweening!