✔ ✔ Animation vor anderer Animation stoppen

[Jan-Frederik Stieler]

Hi,
ich habe in HTMl eine Message die sich selbst nach 30 s ausblendet und entfernt.
Nun möchte ich das per usereingriff beschleunigen per close button.
Ich stope als erstes die animation des Borders udn dann fade ich das Element aus und entferne es.
Das stoppen der Animation funktion aber nicht.

https://codepen.io/janstieler-the-bashful/pen/wvZKaqJ?editors=1111

Könnte mal jemand drüberschauen und mir eventuell sagen wo mein Denkfehler ist?

Grüße

 

[Andreas-B]

Hallo @Jan-Frederik Stieler

Du versuchst die Animation über

messageElement.style.animationPlayState = 'paused';

zu stoppen.
Die animation läuft aber auf dem .message::after Element.
Damit die Animation stoppt, musst du sie also auf diesem Element stoppen.

Da wir ein Pseudoelement nicht über JavaScript selektieren können würde ich dir vorschlagen das Problem in CSS zu lösen, indem du über

 /* ... */
animation: widthElem 30s linear forwards;
animation-play-state: inherit;

die Eigenschaft animation-play-state auf das Pseudoelement überträgst.
(Beachte hier, dass die Eigenschaft hinter der animation stehen muss, da sie sonst von dieser überschrieben wird.)

Grüße
Andreas

 

[Jan-Frederik Stieler]

Hallo Andreas,

Ich Depp hab echt nicht drangedacht das ich das über ein Pseudoelement gebaut habe.

Super kompetente Antwort mit dem inherit!

Ic hahb mich jetzt aber entschieden das animation-play-state komplett rasuzulassen und einfac hdirekt zu faden. Das animation-play-state killt nämlich auch dann das später hinzugefügte fadeout.

Viele Grüße

 

[Sempervivum]

Super Idee, das mit dem Vererben, aber wie man sieht, bleibt ein Problem damit, dass sich die Animationen und die Playstates ins Gehege kommen. Besser wäre es, statt des Pseudoelementes ein normales zu verwenden, um die Animationen sauber zu trennen.