Makina Blog

Le blog Makina-corpus

Introduction aux animations Angular


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.

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

Actualités en lien

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus