Animations réutilisables

Important : Le package @angular/animations est désormais déprécié. L'équipe Angular recommande d'utiliser le CSS natif avec animate.enter et animate.leave pour les animations dans tout nouveau code. Pour en savoir plus, consultez le nouveau guide des animations d'entrée et de sortie. Consultez aussi Abandonner le package Animations d'Angular pour savoir comment commencer à migrer vers des animations en CSS pur dans vos applications.

Cette page fournit des exemples de création d'animations réutilisables.

Créer des animations réutilisables

Pour créer une animation réutilisable, utilisez la fonction animation() afin de définir une animation dans un fichier .ts distinct, et déclarez cette définition d'animation comme une variable const exportée. Vous pouvez ensuite importer et réutiliser cette animation dans les composants de votre application à l'aide de la fonction useAnimation().

animations.ts

import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';

export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}',
  }),
  animate('{{ time }}'),
]);

Dans l'extrait de code précédent, transitionAnimation devient réutilisable parce qu'il est déclaré comme variable exportée.

Utile : Les entrées height, opacity, backgroundColor et time sont remplacées à l'exécution.

Vous pouvez aussi exporter une partie d'une animation. Par exemple, l'extrait suivant exporte le trigger de l'animation.

animations.ts

import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s',
      },
    }),
  ]),
]);

À partir de là, vous pouvez importer des variables d'animation réutilisables dans la classe de votre composant. Par exemple, l'extrait de code suivant importe la variable transitionAnimation et l'utilise via la fonction useAnimation().

open-close.ts

import {Component, input} from '@angular/core';
import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';
import {transitionAnimation} from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s',
          },
        }),
      ]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})

En savoir plus sur les animations Angular

Les pages suivantes pourraient aussi vous intéresser :