Vue Academy · Lektion

Die Transition-Komponente

v-enter-from, v-enter-active, v-enter-to, v-leave-* Klassen, name-Prop für benutzerdefinierte Klassen.

Die Transition-Komponente ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was die Transition-Komponente macht

Vue enthält die integrierte Komponente <Transition>, die beim Einfügen oder Entfernen über v-if oder v-show Enter- und Leave-Animationen auf ein einzelnes Element oder eine einzelne Komponente anwendet.

Sie rendert selbst kein zusätzliches DOM-Element – sie verwaltet lediglich CSS-Klassen und das Timing ihres Kindelements.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Nur ein einzelnes Element

<Transition> erwartet genau ein direktes Kindelement. Das Umschließen mehrerer Geschwisterelemente funktioniert nicht – verwenden Sie stattdessen <TransitionGroup> für Listen.

Das Kindelement muss mit v-if, v-show oder einer dynamischen Komponente ein- und ausgeblendet werden.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Die sechs Transition-Klassen

Während eines Enter- oder Leave-Vorgangs fügt Vue automatisch sechs Klassen in einer festgelegten Reihenfolge hinzu und entfernt sie wieder.

v-enter-from / v-leave-from – Ausgangszustand
v-enter-active / v-leave-active – aktive Phase (platzieren Sie die Transition hier)
v-enter-to / v-leave-to – Endzustand

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Ihre Transition benennen

Geben Sie der Transition ein name-Prop, damit sich das Klassenpräfix von v- in Ihren Namen ändert. Mit name="fade" heißen die Klassen dann fade-enter-from, fade-enter-active und so weiter.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Ein vollständiges Fade-Beispiel

Beim klassischen Fade wird opacity animiert. Das Element beginnt vollständig transparent, die aktive Klasse deklariert die Transition, und die Zielklasse bringt es auf volle Deckkraft.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

Die Enter-Sequenz Schritt für Schritt

Beim Einfügen des Elements:

fade-enter-from und fade-enter-active werden vor dem Zeichnen hinzugefügt (Deckkraft 0).
Im nächsten Frame wird fade-enter-from entfernt und fade-enter-to hinzugefügt, sodass die Deckkraft auf 1 animiert wird.
Nach Ende der Transition werden sowohl die Klassen active als auch to entfernt.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

Die Leave-Sequenz

Beim Verlassen läuft der Vorgang mit den leave-Klassen ähnlich wie beim Einfügen ab. Häufig verwenden Sie dieselbe aktive Regel für beide Richtungen.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if im Vergleich zu v-show

Beide lösen Transitionen aus. v-if hängt das Element tatsächlich ein und aus, während v-show es im DOM belässt und display umschaltet. Bei v-show übernimmt Vue den Wechsel von display rund um die aktive Phase, sodass die Animation weiterhin sichtbar ist.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Beim ersten Rendern anzeigen

Standardmäßig wird die Transition beim ersten Rendern nicht ausgeführt. Fügen Sie das appear-Prop hinzu, damit die Enter-Animation beim erstmaligen Einhängen der Komponente abgespielt wird.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Zwischen zwei Elementen wechseln

Verwenden Sie v-if / v-else innerhalb einer Transition, um zwischen zwei Elementen zu wechseln. Geben Sie jedem Element einen eindeutigen key, wenn es sich um dasselbe Tag handelt, damit Vue sie als unterschiedliche Elemente behandelt.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Reduzierte Bewegung und Barrierefreiheit

Berücksichtigen Sie Benutzer, die weniger Bewegung bevorzugen. Deaktivieren oder verkürzen Sie Transitionen mit der Media Query prefers-reduced-motion, damit Animationen keine Beschwerden verursachen.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Schnelltest

Was definiert fade-enter-from?

Zusammenfassung

Sie haben die integrierte Komponente <Transition> kennengelernt: Sie umschließt ein Element, das mit v-if/v-show ein- und ausgeblendet wird, wendet sechs CSS-Klassen an (enter-from, enter-active, enter-to und die entsprechenden Leave-Klassen), unterstützt ein name-Präfix, appear für das erste Rendern und mode für Wechsel.

Häufig gestellte Fragen

Ist die Lektion „Die Transition-Komponente“ kostenlos?

Ja — der vollständige Text von „Die Transition-Komponente“ 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 „Die Transition-Komponente“?

v-enter-from, v-enter-active, v-enter-to, v-leave-* Klassen, name-Prop für benutzerdefinierte Klassen. 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 1 von 4.

Wie lange dauert die Lektion „Die Transition-Komponente“?

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

← Zurück zu Vue Academy