Appearance
La base des animations
Les animations dans Angular permettent de créer des animations fluides entre différents états de vos composants. Imaginez un menu burger qui s'ouvre et se ferme progressivement, ou une carte qui s'agrandit doucement pour afficher plus de détails - ce sont des exemples parfaits de transitions !
Avant tout: mise en place des animations
Si vous n'avez pas encore installé Angular Animations, vous pouvez le faire avec la commande suivante (vous pouvez le vérifier dans le fichier package.json
)
bash
ng add @angular/animations
Ensuite, allez dans le fichier app.config.ts
et ajoutez dans la liste des providers:
ts
import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations';
bootstrapApplication(AppComponent, {
providers: [
provideAnimationsAsync()
]
});
Charger les animations dès le chargement de l'application
Si vous avez besoin d'animations dès le chargement de votre application, vous devrez utiliser le module d'animations chargé immédiatement plutôt que de manière asynchrone. Pour cela, importez provideAnimations
depuis @angular/platform-browser/animations
et utilisez-le à la place de provideAnimationsAsync
:
Exemple complet
Commençons par créer un composant qui gère l'ouverture et la fermeture d'un panneau.
ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-panel',
standalone: true,
template: `
<div [@openClose]="isOpen ? 'open' : 'closed'" class="panel">
<p>{{ isOpen ? 'Panel ouvert' : 'Panel fermé' }}</p>
</div>
<button (click)="toggle()">Toggle</button>
`,
animations: [
trigger('openClose', [
state('open', style({
height: '200px',
opacity: 1,
backgroundColor: '#f0f0f0'
})),
state('closed', style({
height: '100px',
opacity: 0.5,
backgroundColor: '#cccccc'
})),
transition('open => closed', [
animate('0.3s ease-in-out')
]),
transition('closed => open', [
animate('0.5s ease-out')
])
])
]
})
export class PanelComponent {
isOpen = true;
toggle() {
this.isOpen = !this.isOpen;
}
}
Pour apprendre à utiliser les animations, il faut comprendre les quatre concepts suivants : les déclencheurs, les états, les styles et les transitions.
Les déclencheurs (trigger)
ts
trigger('openClose', [
// ... états ...
])
Un déclencheur est un nom qui identifie une animation. Ici, nous avons choisi openClose
. C'est un nom qui doit être unique dans votre application. Nous l'appliquons ensuite à notre composant avec la directive @openClose
:
html
<div [@openClose]="isOpen ? 'open' : 'closed'" class="panel">
<p>{{ isOpen ? 'Panel ouvert' : 'Panel fermé' }}</p>
</div>
A savoir
Mettez un @
devant le nom du déclencheur dans votre template. Comme pour les directives, vous pouvez le rendre dynamique avec la syntaxe des []
autour du nom du déclencheur.
Les états (state)
ts
trigger('openClose', [
state('open', ...),
state('closed', ...)
])
Les états sont les différentes formes que peut prendre un composant. Ici, nous avons deux états : open
et closed
. C'est une manière de dire "quand je suis dans l'état open, je veux que mon composant ressemble à ceci, et quand je suis dans l'état closed, je veux que mon composant ressemble à cela".
Le style (style)
ts
trigger('openClose', [
state('open', style({
// ... propriétés ...
})),
state('closed', style({
// ... propriétés ...
}))
])
Le style est un objet qui définit les propriétés CSS que vous voulez animer. Par exemple, si vous voulez animer la hauteur et la transparence de votre composant, vous pouvez faire:
ts
state('open', style({
height: '200px',
opacity: 1
}))
Ecrire en camelCase
Les propriétés CSS sont écrites en camelCase dans Angular. Par exemple, background-color
est écrit backgroundColor
.
Les transitions
ts
trigger('openClose', [
// ... états ...
transition('open => closed', [
animate('0.3s ease-in-out')
]),
transition('closed => open', [
animate('0.5s ease-out')
])
])
Les transitions sont les liens entre les états. Elles définissent comment passer d'un état à un autre. Ici, nous avons deux transitions :
open => closed
: transition de l'état open à l'état closedclosed => open
: transition de l'état closed à l'état open
SYNTAXE DES DURÉES
Vous pouvez spécifier les durées de plusieurs façons :
- En millisecondes :
animate(300)
- En secondes :
animate('0.3s')
- Avec un délai :
animate('0.3s 100ms')
TIP
Pour des animations plus complexes, vous pouvez utiliser des keyframes.
ts
transition('closed => open', [
animate('0.5s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1.0 })
]))
])
PERFORMANCE
Évitez d'animer des propriétés coûteuses en performance comme width
ou height
. Préférez transform
quand c'est possible :
ts
state('open', style({
transform: 'scale(1.2)',
opacity: 1
}))