Animation vor anderer Animation stoppen

Jan-Frederik Stieler

Monsterator
Moderator
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
 
Lösung
Hallo @Jan-Frederik Stieler

Du versuchst die Animation über
Javascript:
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
CSS:
 /* ... */
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
Hallo @Jan-Frederik Stieler

Du versuchst die Animation über
Javascript:
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
CSS:
 /* ... */
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
 
Lösung
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
 
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.
 

Neue Beiträge

Zurück