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
Bien démarrer avec Ionic Bien démarrer avec Ionic 07/12/2015

Une ressource pour les développeurs Ionic et ceux qui veulent démarrer dans le développement ...

How to create an Angular library How to create an Angular library 08/02/2017

Having a light and clean distribution AND running tests on Travis, showing demo on Github Pages, ...

Faire une boucle for dans un template Angular 2 Faire une boucle for dans un template Angular 2 11/07/2016

Quand on n'a pas d'itérable sous la main

Retour sur le petit déjeuner "Quel framework JS pour 2017 ?" Retour sur le petit déjeuner "Quel framework JS pour 2017 ?" 09/12/2016

Si vous n'avez pas pu assister à notre session toulousaine ou à notre session nantaise, voici la ...

Physiologie et mœurs des services Angular 2 Physiologie et mœurs des services Angular 2 02/06/2016

Sont-ils des singletons ? Faut-il éviter de les nourrir après minuit ?