animationend

CSS Animation - ein hin und weg…

Henning über Webdesign

Was bedeuted CSS-Animation Handling? CSS-Animationen haben einen immer größeren Stellenwert im Webdesign und in modernen GUI Applikationen. Verwendet man Custom CSS-Animationen oder eine Bibliothek, wie z.B. animate.css, wird man irgendwann dem folgenden Szenario begegnen: Animations-Klasse hinzufügen und nach erfolgter Animation wieder entfernen.

Hier kommt uns der animationend-Event zugute, der in unterschiedlichen Prefixen angesprochen werden kann. Verschiedene Animations-Events sind im DOM Event System ansprechbar. Dies sind der Start, das Ende einer Animation und auch das Ende einer Animations-Iteration. Ein Element kann dabei viele unterschiedliche Eigenschaften besitzen, die gleichzeitig animiert werden. An dieser Stelle ist allerdings für uns nur das Ende der Animation von Bedeutung. Mit nachfolgendem Code könne wir das beschriebene Szenario adressieren:

$("#animateme")
   .bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
   function(){
        $(this).removeClass("animation");
   }).addClass("animation");

Möchte man den obigen Code nur einmal auf den Event reagieren lassen kann man den jQuery EventHandler one() verwenden. Wir one() verwendet, wird die EventHandler Funktion genau einmal pro Element ausgeführt. Den Code kann man wie folgt umstellen:

$("#animateme")
   .one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
   function(){
      $(this).removeClass("animation")
   }).addClass("animation");

Meinen englischen Original Tip gibt es auf CoderWall.

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries