Vue Academy · Lektion

TransitionGroup für Listenanimationen

v-for-Listen animieren, Move-Transitions, versetzte Animationen mit delay.

Lektion 4 von 413 Schritte

TransitionGroup für Listenanimationen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Listen animieren

<Transition> verarbeitet ein einzelnes Element. Für Listen, die mit v-for gerendert werden, verwenden Sie <TransitionGroup>. Damit lassen sich Elemente beim Hinzufügen, Entfernen und Neuanordnen animieren.

Die tag-Prop

Im Gegensatz zu Transition kann TransitionGroup ein echtes Wrapper-Element rendern. Übergeben Sie tag="ul" (oder ein beliebiges anderes Tag), und dieses Element wird um die Listenelemente herum ausgegeben.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

Jedes Element benötigt einen key

Ein eindeutiger :key für jedes Element ist erforderlich. Vue verwendet ihn, um nachzuverfolgen, welche Elemente verschoben, eingefügt oder entfernt wurden. Verwenden Sie bei animierten Listen niemals den Array-Index als Key.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Enter- und Leave-Klassen

TransitionGroup verwendet dieselben Enter- und Leave-Klassen wie Transition. Definieren Sie sie für das Einblenden und Entfernen der einzelnen Elemente.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

Die spezielle move-Klasse

Das herausragende Merkmal ist die -move-Klasse, zum Beispiel list-move. Wenn Elemente neu angeordnet werden, animiert Vue jedes Element mithilfe einer Transform-Transition sanft an seine neue Position.

.list-move {
  transition: transform 0.4s ease;
}

Die FLIP-Technik

Hinter -move steckt FLIP: Zuerst (First) wird die alte Position aufgezeichnet, dann (Last) die neue Position gelesen, anschließend (Invert) mit einem Transform invertiert, sodass das Element unbewegt aussieht, und schließlich (Play) der Transform entfernt. Vue erledigt das automatisch.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Zu entfernende Elemente benötigen eine absolute Positionierung

Ein Element, das entfernt wird, nimmt weiterhin Platz ein. Dadurch kann die Move-Animation seiner Nachbarelemente beeinträchtigt werden. Setzen Sie position: absolute auf die leave-active-Klasse, damit zu entfernende Elemente aus dem Layoutfluss genommen werden.

.list-leave-active {
  position: absolute;
}

Beispiel für eine sortierbare Liste

Kombinieren Sie Enter-, Leave- und Move-Klassen, und Vue animiert Einfügen, Entfernen und Umsortieren gleichzeitig.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Mit transitionDelay zeitlich versetzen

Damit Elemente nacheinander erscheinen, binden Sie ein Inline-transition-delay basierend auf dem Index des Elements. Jedes Element wartet etwas länger als das vorherige.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Zeitliche Staffelung mit JS-Hooks

Für eine datenabhängige Staffelung können Sie auch die JS-Hooks und ein data-index-Attribut verwenden und jedes onEnter um den Index des Elements verzögern.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Hinweise zur Performance

FLIP animiert transform, was GPU-freundlich ist. Halten Sie Listen in einer angemessenen Größe und bevorzugen Sie für flüssige Bewegungen mit 60 fps transform und opacity gegenüber Eigenschaften wie width oder top, die ein neues Layout auslösen.

Kurzer Test

Was ermöglicht die Klasse list-move?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben <TransitionGroup> für Listen kennengelernt: Rendern Sie mit tag ein Wrapper-Element, geben Sie jedem Element einen eindeutigen :key, verwenden Sie Enter- und Leave-Klassen sowie die -move-Klasse für FLIP-basierte Animationen beim Neuanordnen, positionieren Sie zu entfernende Elemente absolut und erzeugen Sie mit indexbasiertem transitionDelay gestaffelte Effekte.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „TransitionGroup für Listenanimationen“ kostenlos?

Ja — der vollständige Text von „TransitionGroup für Listenanimationen“ 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 „TransitionGroup für Listenanimationen“?

v-for-Listen animieren, Move-Transitions, versetzte Animationen mit delay. 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 4 von 4.

Wie lange dauert die Lektion „TransitionGroup für Listenanimationen“?

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