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
Routing Angular : optimisez le rendu au changement de page Routing Angular : optimisez le rendu au changement de page 08/06/2018

Avec les Resolvers, les Guards et les Initializers, découvrez les bonnes pratiques pour éviter ...

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

Des boucles de composants génériques avec Angular Des boucles de composants génériques avec Angular 15/04/2019

Ou comment faire des composants de listes réutilisables avec n'importe quel objet.

À Makina, la JS fatigue n'existe pas... 01/04/2019

...car la passion l'emporte

Makina Corpus, premier pas en éco-conception 05/11/2018

Makina Corpus va être accompagnée pour intégrer les principes de l’éco-conception dans le ...

Nos formations
Formation Angular