Nous allons voir comment créer une animation simple sur un composant.

Import dans le composant

Tout d’abord, nous devons importer dans notre composant trigger, state, style, transition, animate.

import {Component, OnInit, trigger, state, style, transition, animate}
from     '@angular/core';

Déclaration de notre animation

Les animations fonctionnent grâce à la transition de deux états. Nous allons, ici, définir un effet de grossissement lors du changement d'état.

@Component({
  selector: 'my-app',
  template: '<div [@Grow]="stateGrow">Hello {{name}}</div>',
  animations: [
    trigger('Grow', [
      state('inactive', style({
        transform: 'scale(0.1)'
      })),
      state('active', style({
        transform: 'scale(1)'
      })),
      transition('inactive => active', animate('800ms ease-in')),
    ])
  ]
})

Au premier regard, la déclaration d’une animation peut paraître compliquée mais une fois le concept intégré c’est assez simple, et même logique.

trigger permet de définir le nom de l’animation ‘Grow’, celui-ci pourra être utilisé dans le template.

transition définit les états pour lesquels l’animation devra s'exécuter.

style permet de définir les effets d’animations souhaités.

animate correspondant à la durée et au ‘easing’ de l’animation.

Le template

<div[@Grow]="stateGrow">Hello {{name}}</div>

Exemple d'exécution

private stateGrow : string = "inactive"; 
ngOnInit() {
    let timer = Observable.timer(300);
    timer.subscribe(t=> {
      this.stateGrow = "active";
    });
}

Résultat de notre exemple : Au chargement initial, notre composant sera taillé à 10% de sa taille normale. Puis 300ms plus tard, il s’animera et s’agrandira jusqu’à atteindre sa taille normale.

Lien vers l'exemple sur Plunker