Transitions et animations des routes
RouterView avec Transition, transition-name fondé sur la route et transition par glissement ou fondu entre les routes
Transitions et animations des routes est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Animer les transitions entre les routes
Lorsque l’URL change, le composant correspondant est remplacé instantanément. En entourant la vue avec Transition de Vue, vous pouvez faire apparaître les pages en fondu ou les faire glisser pour une expérience plus fluide.
RouterView avec v-slot
Pour animer la vue, vous devez accéder au composant résolu. La forme avec slot à portée de RouterView expose Component et route.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Entourer avec Transition
Placez une Transition autour du component dynamique. Vue applique les classes d’entrée et de sortie lors du montage et du démontage du composant de route.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Pourquoi le mode out-in ?
Sans mode, les anciennes et les nouvelles pages s’animent en même temps et se chevauchent. mode="out-in" attend que l’ancienne page soit sortie avant de faire entrer la nouvelle.
Définir le CSS
Le name devient le préfixe d’une classe CSS. Définissez les transitions d’entrée et de sortie pour créer un fondu.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Transition propre à chaque route via les métadonnées
Stockez un nom de transition dans les meta de la route afin que les différentes routes s’animent différemment : glissement pour une section, fondu pour une autre.
{ path: '/about', component: About, meta: { transition: 'slide' } }Calculer le nom de la transition
Lisez route.meta.transition depuis le slot et liez-le au nom de Transition, avec une valeur par défaut en solution de repli.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Glissements directionnels
Vous pouvez choisir la transition dynamiquement selon le sens de la navigation : par exemple, faire glisser vers la gauche en avançant et vers la droite en revenant, en comparant la profondeur des routes dans une garde.
Entrée et sortie par glissement
Un glissement combine l’opacité et la transformation. Faites entrer la page depuis la droite et sortir la page précédente vers la gauche.
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>Utiliser une clé lors des changements de paramètres
Si deux routes partagent le même composant, comme /user/1 et /user/2, Vue le réutilise et ignore la transition. Ajoutez une :key au chemin de la route pour forcer le nouveau rendu et l’animation.
<component :is="Component" :key="route.path" />Respecter la réduction des animations
Pour l’accessibilité, désactivez les animations lorsque l’utilisateur préfère réduire les mouvements, à l’aide d’une requête média CSS.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Vérification rapide
Vérifiez vos connaissances sur les transitions de routes.
Récapitulatif
Vous avez appris à animer les routes :
- Utilisez RouterView avec v-slot pour obtenir Component et route.
- Entourez component :is de Transition et utilisez le mode
mode="out-in". - Définissez le CSS d’entrée et de sortie en fonction du nom de la transition.
- Lisez route.meta.transition pour les animations propres à chaque route ; ajoutez :key aux composants partagés.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Transitions et animations des routes » est-elle gratuite ?
Oui — le texte complet de « Transitions et animations des routes » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transitions et animations des routes » ?
RouterView avec Transition, transition-name fondé sur la route et transition par glissement ou fondu entre les routes Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 animations des routes » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Champs meta des routes et typage
- Transitions et animations des routes
- Configuration du comportement de défilement
- Navigation programmatique et useRouter