Inhaltsverzeichnis


Nichts verpassen?

angularjs | Sascha Brink ÔÇó | 4 Minuten

Seit AngularJS 1.2 sind Animationen mit ng-animate fester Bestandteil des Frameworks. Unterst├╝tzt werden Animationen mit CSS3 und JavaScript.

Installation

Die Unterst├╝tzung f├╝r Animationen befindet sich in einer separaten Datei. Der erste Schritt besteht darin, diese einzubinden und das Modul ngAnimate als Abh├Ąngigkeit anzugeben. In eurer HTML-Datei w├Ąre das beispielsweise f├╝r die AngularJS-Version des Google-CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>

Dazu die Modul-Deklaration im JavaScript:

angular.module('myApp', ['ngAnimate'])

Direktiven und Ereignisse

AngularJS unterst├╝tzt Animationen f├╝r die folgenden Direktiven:

Direktive Unterst├╝tzte Animationen
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow & ngHide add and remove

Von jeder Direktive k├Ânnen verschiedene Ereignisse animiert werden. F├╝r ngRepeat sind es zum Beispiel:

  • enter: ein neues Element wird in die Liste eingef├╝gt
  • leave: ein Element wird aus der Liste entfernt
  • move: ein bestehendes Element wird innerhalb der Liste verschoben

Vorbereitung im HTML

Der erste Schritt besteht immer darin, dem Element mit der Direktive eine Klasse zu geben. Dies gilt sowohl f├╝r Animation mit CSS3 als auch f├╝r Javascript.

<li ng-repeat="item in items" class="list-item">{{item}}</li>

Ab jetzt kommt es darauf an, ob ihr CSS oder JavaScript unterst├╝tzen wollt.

CSS3-Animationen

Beginnen wir mit der einfachen Variante - CSS3-Animationen. Wir animieren im folgenden Beispiel das Einblenden eines neuen Elements ├╝ber einen Highlight-Effekt. D.h. ein neues Element leuchtet erst gelb auf und geht dann sanft in wei├č ├╝ber. In Eurem CSS schreibt ihr dazu:

.list-item.ng-enter {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  background-color: yellow;
}
.list-item.ng-enter-active {
  background-color: white;
}

Demo CSS3-Animation als JSFiddle

Der Ablauf dabei sieht folgenderma├čen aus:

  1. Die Klasse .ng-enter wird als erstes hinzugef├╝gt.
  2. Es folgt unmittelbar die Klasse .ng-enter-active.
  3. Es wird gewartet bis die Animation durchgelaufen ist.
  4. Beide Klassen werden wieder entfernt.

AngularJS CSS Animations

Die Namen der zus├Ątzlichen CSS-Klassen kommen ├╝ber Konvention zustande:

  • enter: .ng-enter und .ng-enter-active
  • leave: .ng-leave und .ng-leave-active
  • move: .ng-move und .ng-move-active

JavaScript-Animationen

F├╝r die meisten Animationen reichen CSS3-Transitionen aus. Fr├╝her oder sp├Ąter werdet ihr aber wahrscheinlich an deren Grenzen sto├čen. Entweder m├╝sst ihr ├Ąltere Browser unterst├╝tzen oder ihr habt komplexe Animationen, die mit CSS3 nicht m├Âglich sind.

F├╝r Animationen mit JavaScript m├╝sst ihr eine animation mit dem Klassennamen auf eurem Modul definieren. Achtet dabei auf den Punkt im Namen!

Grunds├Ątzlicher Aufbau einer Animation mit JavaScript:

angular.module('myApp', ['ngAnimate'])
  .animation('.list-item', function() {
    return {
      enter/leave/move: function(element, done) {
        // Die eigentliche Animation wird hier gestartet.
        // done() muss nach Beenden aufgerufen werden
      },

      // Animation, die vor Hinzuf├╝gen/Entfernen der Klassen
      // ausgef├╝hrt werden soll
      beforeAddClass: function(element, className, done) { },
      beforeRemoveClass: function(element, className, done) { },

      // Animation, die nach Hinzuf├╝gen/Entfernen der Klassen
      // ausgef├╝hrt werden soll
      addClass: function(element, className, done) { },
      removeClass: function(element, className, done) { }
    };
  });

Demo JavaScript-Animation als JSFiddle

Bei JavaScript-Animationen m├╝sst ihr euch selbst um das richtige Timing der Animationen k├╝mmern und nach dem Ende die Funktion done() aufrufen.

Fazit

Seit Version 1.1.5 hat sich die Animations-API noch einmal komplett ge├Ąndert - zum Besseren. Sobald das ÔÇśngAnimateÔÇÖ-Modul eingebunden wurde, ist die Bedienung kinderleicht. Zudem lassen sich Animationen sehr einfach sp├Ąter nachr├╝sten.