CSS Animation verweigert Dienst!

[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