CSS Animation verweigert Dienst!

[Meister Mantel]

Hallo, ich habe eine Frage: Ich habe eine Animation, die sich rekursiv immer wieder selbst aufrufen soll, wenn eine gewisse Bedingung gegeben ist. Das passiert aber nicht - wieso?

CSS:

.Animationsklasse {
	animation-name: AnimationsklasseKeys;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes AnimationsklasseKeys {
	0%	{transform: scale(0, 0);}
	50%	{transform: scale(1, 1);}
	100% {transform: scale(0, 0);}
}

Javascript:

/*

CODE



*/
let Bedingung = true;

let Animieren = () => {


	let MeldungenParagraph = document.getElementById("Meldungen");
	

	
	let nach_Animation = () => {
		MeldungenParagraph.removeEventListener('animationend', nach_Animation);
		MeldungenParagraph.classList.remove("Animationsklasse");
		/*
		
		CODE
		
		*/
		if (Bedingung) Animieren(); // Wieso wird Animieren hier nicht mehr aufgerufen?

	};
	
	MeldungenParagraph.addEventListener('animationend', nach_Animation);
	MeldungenParagraph.classList.add("Animationsklasse");
};

Animieren();

Dank euch herzlichst!

[Felix Riesterer]

Lieber Meister,

MeldungenParagraph.removeEventListener('animationend', nach_Animation);

wo ist das Event animationend definiert? Die Schreibweise ist falsches Englisch, also muss es entweder ein von Dir definiertes CustomEvent sein, oder Du hast schlicht animated falsch geschrieben.

Liebe Grüße

Felix Riesterer

[Meister Mantel]

Hallo Felix, Ich bin ein bißchen verwirrt, wieso soll animationend ein CustomEvent sein? Ist doch alles ganz hochoffiziell?

[Felix Riesterer]

Lieber Meister,

mein Fehler, Asche auf mein Haupt. Hätte vielleicht vorher noch einmal die offiziellen Events nachlesen sollen. Dachte zuerst es sei animationed als falsches Partizip Perfekt. Aber es ist eben animationend und damit völlig korrekt.

Liebe Grüße

Felix Riesterer

[Der Martin]

Hallo Felix,

wo ist das Event animationend definiert? Die Schreibweise ist falsches Englisch

was ist an Animation End falsch? Die Reduktion auf Kleinschreibung und die Eliminierung von Blanks ist ja für Javascript-Events keine Seltenheit.

Live long and pros healthy,
 Martin

[Meister Mantel]

Also gut, nachdem jetzt alle Fragen zu Javascript 101 abgehandelt wurden, hat vielleicht auch jemand eine Idee zu meiner eigentlichen Frage (nämlich warum Animieren() nach dem ersten Durchgang nicht nochmals aufgerufen wird)?

[Rolf B]

Hallo Meister,

Javascript 101

Eher 302. Animation-Events sind schon etwas fortgeschrittener.

Aber beschäftigen wir uns mal mit „JavaScript im Browser“ 101 und dem Debugging-Propädeutikum.

Die Funktion wird mehrfach aufgerufen, aber das Entfernen und Wiederherstellen der Klasse wird nicht erkannt. Beweis: Baue einfach console.log Anweisungen ein.

Aber warum wird das classList.remove/add nicht erkannt? Es geschieht zu schnell hintereinander, im selben Step der Eventloop, es ist keine Layout-Phase dazwischen. Die Rendering-Engine des Browsers bekommt gar nicht mit, dass die Klasse mal kurz weg war.

Welche Lösung Dir hilft, hängt auch davon ab, ob Du die Bedingung schon vor Animationsbeginn kennst. Weißt Du, wie oft Du blinken willst? Dann kann Dir animation-iteration-count helfen.

Wenn nicht, wenn Du nach jedem Animationsschritt neu prüfen musst, dann mach es so:

if (Bedingung) setTimeout(Animieren, 0);

Das verlegt den Animieren-Aufruf in den nächsten Step der Eventloop. Damit kommt ein Layoutschritt dazwischen und der Browser registriert das Verschwinnden und Wiedererscheinen der Klasse.

Rolf