Accueil / Blog / Métier / 2017 / Introduction aux animations Angular

Introduction aux animations Angular

Par Bastien Alvez — publié 31/01/2017
Angular met à disposition un système qui permet de créer des animations qui ont les mêmes performances que du pur CSS mais qui permet d’avoir un contrôle plus aisé au sein de l’application.
Introduction aux animations Angular

Angular

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

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
How to setup Angular Universal How to setup Angular Universal 29/06/2017

Step by step explanation. All the pitfalls to avoid.

Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 24/07/2017

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular 2 et 4.

SEO : indexing a JavaScript application SEO : indexing a JavaScript application 29/06/2017

How to produce a server-side rendered version of your web application.

SEO : indexer une application Javascript SEO : indexer une application Javascript 29/06/2017

Comment utiliser le code de votre application pour un rendu server-side.