Route-overgangen en animatie
RouterView met Transition, transition-name op basis van de route en tussen routes schuiven of vervagen.
Route-overgangen en animatie is een gratis Vue Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Overgangen tussen routes animeren
Wanneer de URL verandert, wordt de overeenkomende component onmiddellijk vervangen. Door de weergave in Vue's Transition te plaatsen, kun je tussen pagina's vervagen of schuiven voor een vloeiendere ervaring.
RouterView met v-slot
Om te animeren heb je toegang nodig tot de opgeloste component. De vorm met een scoped slot van RouterView stelt Component en route beschikbaar.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Inpakken met Transition
Plaats een Transition rond de dynamische component. Vue past klassen voor binnenkomen en verlaten toe wanneer de routecomponent wordt toegevoegd en verwijderd.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Waarom mode out-in?
Zonder mode worden de oude en nieuwe pagina tegelijk geanimeerd en overlappen ze elkaar. mode="out-in" wacht tot de oude pagina is verdwenen voordat de nieuwe binnenkomt.
De CSS definiëren
De name wordt het voorvoegsel van een CSS-klasse. Definieer overgangen voor binnenkomen en verlaten om te vervagen.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Overgang per route via meta
Bewaar een naam voor de overgang in de meta van de route, zodat verschillende routes verschillend worden geanimeerd — schuiven voor de ene sectie en vervagen voor de andere.
{ path: '/about', component: About, meta: { transition: 'slide' } }De naam van de overgang berekenen
Lees route.meta.transition uit de slot en koppel deze aan de naam van Transition. Gebruik daarbij een standaardwaarde als terugvaloptie.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Gerichte schuifbewegingen
Je kunt de overgang dynamisch kiezen op basis van de navigatierichting — bijvoorbeeld naar links schuiven bij vooruitgaan en naar rechts bij teruggaan — door in een guard de diepte van routes te vergelijken.
Binnenkomen en verlaten met schuiven
Een schuifbeweging combineert doorzichtigheid en transform. Laat de binnenkomende pagina vanaf rechts naar binnen bewegen en de vertrekkende pagina naar links verdwijnen.
<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>Een key gebruiken bij parameterwijzigingen
Als twee routes dezelfde component delen, zoals /user/1 en /user/2, hergebruikt Vue deze en wordt de overgang overgeslagen. Voeg een :key toe aan het routepad om opnieuw renderen en animeren af te dwingen.
<component :is="Component" :key="route.path" />Verminderde beweging respecteren
Schakel voor toegankelijkheid animaties uit wanneer de gebruiker een voorkeur heeft voor minder beweging, met behulp van een CSS-mediaquery.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Korte kennistoets
Test je kennis van route-overgangen.
Samenvatting
Je hebt geleerd hoe je routes animeert:
- Gebruik RouterView met v-slot om Component en route te verkrijgen.
- Pak component :is in met Transition en gebruik mode="out-in".
- Definieer CSS voor binnenkomen en verlaten op basis van de naam van de overgang.
- Lees route.meta.transition voor animaties per route en voeg :key toe voor gedeelde componenten.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Route-overgangen en animatie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Route-overgangen en animatie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Route-overgangen en animatie”?
RouterView met Transition, transition-name op basis van de route en tussen routes schuiven of vervagen. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Route-overgangen en animatie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Route-meta-velden en typering
- Route-overgangen en animatie
- Scrollgedrag configureren
- Programmatic navigation en useRouter