Bases des animations : trigger et state
Définissez les états et les déclencheurs d’animation
Bases des animations : trigger et state est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Animations Angular
Le système d'animations d'Angular est un DSL déclaratif fondé sur l'API Web Animations. Vous décrivez des états et des transitions, et Angular gère le minutage ainsi que les mises à jour du DOM.
Configuration
Fournissez les animations dans votre configuration d'amorçage pour activer le moteur d'animation.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});Le déclencheur
Un trigger nomme une animation et regroupe ses états et ses transitions. Vous l'attachez à un élément au moyen d'une liaison.
animations: [
trigger('openClose', [
// states and transitions
])
]Définir les états
state associe un état nommé à un ensemble de styles CSS que l'élément doit avoir dans cet état.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))La fonction style
style prend un objet de propriétés CSS. Utilisez des clés en camelCase ou des noms CSS entre guillemets.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Lier le déclencheur
Dans le modèle, liez @triggerName à une expression qui renvoie l'état actuel.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Un déclencheur complet
Voici un déclencheur avec deux états et une transition entre eux.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Piloter l'état depuis le composant
Le composant ne fait que basculer une valeur booléenne ou une chaîne de caractères ; Angular interpole entre les styles des états correspondants.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }État générique
Le caractère générique * correspond à n'importe quel état. Il est utile pour les valeurs par défaut et les animations d'entrée et de sortie abordées plus loin.
state('*', style({ opacity: 1 }))État void
L'état spécial void représente un élément qui ne se trouve pas dans le DOM. Il sert de base aux animations d'entrée et de sortie.
Pourquoi des animations déclaratives ?
Les animations déclaratives maintiennent la logique de minutage en dehors des composants, s'intègrent au cycle de vie d'Angular et nettoient automatiquement les éléments lorsqu'ils quittent le DOM.
Vérification rapide
Testez votre compréhension des notions fondamentales des animations.
Récapitulatif
Vous avez appris que les animations Angular utilisent un trigger contenant des définitions de state (chacune associant un nom à style), lié dans le modèle via [@trigger]. Les états void et * couvrent respectivement l'absence d'état et tous les états.
Questions Fréquemment Posées
La leçon « Bases des animations : trigger et state » est-elle gratuite ?
Oui — le texte complet de « Bases des animations : trigger et state » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Bases des animations : trigger et state » ?
Définissez les états et les déclencheurs d’animation Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Bases des animations : trigger et state » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases des animations : trigger et state
- Transitions et minutage
- Animations d’entrée et de sortie
- Images clés et décalage progressif