Transitions et minutage
Animez les transitions entre les états
Transitions et minutage est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 transitions entre les états
Les états décrivent où l'élément reste ; les transitions décrivent comment il se déplace entre ces états. La fonction transition associe un changement d'état à une animation.
La fonction transition
transition prend une expression de changement d'état et une ou plusieurs étapes d'animation.
transition('closed => open', animate('300ms'))Opérateurs de direction
Utilisez => pour une seule direction et <=> pour les deux directions.
transition('open <=> closed', animate('250ms ease-in-out'))La fonction animate
animate définit le minutage : durée, délai facultatif et fonction d'accélération. Le format de la chaîne est "duration delay easing".
animate('500ms 100ms ease-out')Unités de durée
Les durées acceptent ms ou s. Un nombre sans unité est interprété comme une durée en millisecondes.
animate('0.4s')
animate('400ms')
animate(400)Fonctions d'accélération
Les fonctions d'accélération contrôlent l'accélération : linear, ease, ease-in, ease-out, ease-in-out ou une fonction cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Styles cibles intégrés
animate peut prendre un second argument style pour animer vers des styles qui ne sont pas associés à un état nommé.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Plusieurs étapes
Transmettez un tableau d'étapes pour exécuter une séquence au sein d'une seule transition.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Transitions génériques
Utilisez * pour faire correspondre les transitions depuis ou vers n'importe quel état, ce qui est pratique pour les effets d'entrée génériques.
transition('* => open', animate('200ms'))Styles de départ
Un style() seul placé avant animate() définit le point de départ, puis Angular anime l'élément vers les styles de l'état de destination.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Bonnes pratiques de minutage
Gardez les transitions de l'interface courtes (150 à 300 ms) pour préserver la réactivité. Réservez les durées plus longues aux mouvements amples et intentionnels. Adaptez la fonction d'accélération à l'effet recherché.
Vérification rapide
Testez votre compréhension des transitions et du minutage.
Récapitulatif
Vous avez appris que transition relie les changements d'état (avec => ou <=>) aux étapes animate. La chaîne de minutage suit le format durée délai accélération, et vous pouvez enchaîner des étapes style/animate pour créer des séquences.
Questions Fréquemment Posées
La leçon « Transitions et minutage » est-elle gratuite ?
Oui — le texte complet de « Transitions et minutage » 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 « Transitions et minutage » ?
Animez les transitions entre les états 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 2 sur 4.
Combien de temps prend la leçon « Transitions et minutage » ?
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