Animations d’entrée et de sortie
Animez l’entrée et la sortie des éléments
Animations d’entrée et de sortie est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Animer les apparitions et les disparitions
Vous souhaitez souvent animer les éléments au moment où ils apparaissent ou disparaissent, par exemple lorsqu'un élément est ajouté à une liste ou en est supprimé. Angular fournit les alias :enter et :leave pour cela.
void et apparition
Un élément qui ne se trouve pas dans le DOM est dans l'état void. L'entrée correspond à void => * et la sortie à * => void.
Alias :enter
:enter est une abréviation de void => *. Utilisez-le pour animer les éléments au moment de leur ajout.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Alias :leave
:leave est une abréviation de * => void. Angular maintient l'élément dans le DOM jusqu'à la fin de l'animation de sortie.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])Déclencher avec le flux de contrôle
Appliquez le déclencheur aux éléments gérés par @if ou @for. Leur ajout ou leur suppression déclenche une animation d'entrée ou de sortie.
@if (visible()) {
<div [@fade]>Hello</div>
}Un déclencheur de fondu
Voici un déclencheur réutilisable pour effectuer un fondu entrant ou sortant.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])Exemple de glissement entrant
Combinez la transformation et l'opacité pour créer un effet de glissement à l'entrée.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])Animations des éléments de liste
Placez le déclencheur sur chaque élément à l'intérieur de @for ; l'ajout ou la suppression d'un élément anime chacun d'eux indépendamment.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}Pourquoi la sortie nécessite le moteur
Normalement, un élément supprimé disparaît instantanément. Le moteur d'animation intercepte la suppression, conserve le nœud, exécute l'animation :leave, puis le supprime, le tout automatiquement.
Désactiver les animations
Liez @.disabled pour ignorer les animations sous certaines conditions, ce qui est utile pour respecter les préférences de réduction des mouvements ou lors du rendu initial.
<div [@.disabled]="prefersReducedMotion">...</div>Bonnes pratiques
Gardez les animations d'entrée et de sortie courtes et discrètes. Respectez prefers-reduced-motion. Animez la transformation et l'opacité (compatibles avec le GPU) plutôt que les propriétés de mise en page pour obtenir un mouvement fluide.
Vérification rapide
Vérifiez votre compréhension des animations d’entrée et de sortie.
Récapitulatif
Vous avez appris que :enter (void => *) et :leave (* => void) animent les éléments lorsqu’ils sont ajoutés et supprimés, en fonctionnant avec @if/@for. Le moteur conserve les nœuds sortants jusqu’à la fin de leur animation.
Questions Fréquemment Posées
La leçon « Animations d’entrée et de sortie » est-elle gratuite ?
Oui — le texte complet de « Animations d’entrée et de sortie » 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 « Animations d’entrée et de sortie » ?
Animez l’entrée et la sortie des éléments 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 3 sur 4.
Combien de temps prend la leçon « Animations d’entrée et de sortie » ?
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