Routenübergänge und Animationen
RouterView mit Transition, transition-name abhängig von der Route sowie Gleiten und Überblenden zwischen Routen
Routenübergänge und Animationen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Animationen zwischen Routen
Wenn sich die URL ändert, wird die zugehörige Komponente sofort ausgetauscht. Indem Sie die Ansicht mit Vues Transition umschließen, können Sie zwischen Seiten überblenden oder gleiten und so für ein flüssigeres Erlebnis sorgen.
RouterView mit v-slot
Für Animationen benötigen Sie Zugriff auf die aufgelöste Komponente. Die Form von RouterView mit einem Scoped Slot stellt Component und route bereit.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Mit Transition umschließen
Platzieren Sie eine Transition um die dynamische component. Vue wendet beim Ein- und Aushängen der Routenkomponente Enter- und Leave-Klassen an.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Warum mode out-in?
Ohne mode werden die alte und die neue Seite gleichzeitig animiert und überlagern sich. mode="out-in" wartet, bis die alte Seite ausgeblendet ist, bevor die neue eingeblendet wird.
CSS definieren
Der Wert von name wird zum Präfix der CSS-Klassen. Definieren Sie für ein Überblenden die Enter- und Leave-Transitions.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Routenabhängige Transition über Meta
Speichern Sie einen Transitionsnamen im meta der Route, damit verschiedene Routen unterschiedlich animiert werden – beispielsweise eine Sektion mit einem Slide und eine andere mit einem Fade.
{ path: '/about', component: About, meta: { transition: 'slide' } }Transitionsnamen berechnen
Lesen Sie route.meta.transition aus dem Slot und binden Sie den Wert an den Namen der Transition. Verwenden Sie dabei einen Standardwert als Fallback.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Richtungsabhängige Slides
Sie können die Transition abhängig von der Navigationsrichtung dynamisch auswählen – beispielsweise beim Vorwärtsgehen nach links und beim Zurückgehen nach rechts –, indem Sie die Routentiefe in einem Guard vergleichen.
Slide beim Ein- und Ausblenden
Ein Slide kombiniert Deckkraft und Transformation. Bewegen Sie die eintretende Seite von rechts herein und die austretende Seite nach links hinaus.
<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>Keying bei Parameteränderungen
Wenn zwei Routen dieselbe Komponente verwenden (etwa /user/1 und /user/2), verwendet Vue sie wieder und überspringt die Transition. Fügen Sie dem Routenpfad ein :key hinzu, um erneutes Rendern und die Animation zu erzwingen.
<component :is="Component" :key="route.path" />Reduzierte Bewegung berücksichtigen
Deaktivieren Sie aus Gründen der Barrierefreiheit Animationen, wenn der Benutzer reduzierte Bewegung bevorzugt. Verwenden Sie dazu eine CSS-Media-Query.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Kurzer Test
Testen Sie Ihr Wissen über Routen-Transitions.
Zusammenfassung
Sie haben gelernt, Routen zu animieren:
- Verwenden Sie RouterView mit v-slot, um Component und route zu erhalten.
- Umschließen Sie component :is mit Transition und verwenden Sie mode="out-in".
- Definieren Sie Enter- und Leave-CSS-Klassen anhand des Transitionsnamens.
- Lesen Sie route.meta.transition für routenabhängige Animationen; fügen Sie bei gemeinsam genutzten Komponenten :key hinzu.
Häufig gestellte Fragen
Ist die Lektion „Routenübergänge und Animationen“ kostenlos?
Ja — der vollständige Text von „Routenübergänge und Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Routenübergänge und Animationen“?
RouterView mit Transition, transition-name abhängig von der Route sowie Gleiten und Überblenden zwischen Routen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Routenübergänge und Animationen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Route-Meta-Felder und Typisierung
- Routenübergänge und Animationen
- Konfiguration des Scroll-Verhaltens
- Programmatische Navigation und useRouter