Vue Academy · Lektion

JavaScript-Transition-Hooks

@before-enter-, @enter-, @after-enter- und @leave-Hooks, GSAP für komplexe Animationen verwenden.

JavaScript-Transition-Hooks ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum JavaScript-Hooks

CSS-Klassen decken die meisten Fälle ab, aber manche Animationen benötigen JavaScript – etwa zur Einbindung von Bibliotheken wie GSAP, für Animationen auf einem Canvas oder zur Berechnung dynamischer Werte. <Transition> stellt dafür Lifecycle-Hooks bereit.

Die verfügbaren Hooks

Vue löst für jede Phase Events aus: @before-enter, @enter, @after-enter, @enter-cancelled sowie die entsprechenden Leave-Hooks.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

before-enter legt den Anfangszustand fest

@before-enter erhält das DOM-Element und wird vor dem Einfügen ausgeführt. Verwenden Sie diesen Hook, um die Anfangsstyles festzulegen – genauso wie bei einer enter-from-Klasse.

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

enter erhält el und done

@enter erhält zwei Argumente: das Element und einen done-Callback. Sie animieren das Element und rufen anschließend done() auf, sobald die Animation abgeschlossen ist, damit Vue weiß, dass der Übergang beendet wurde.

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

Rufen Sie done immer auf

Wenn Sie done() vergessen, wartet Vue unendlich lange und der Übergang wird nie abgeschlossen – after-enter wird nie ausgelöst und das Element kann in einem halbanimierten Zustand verbleiben. Der Aufruf ist bei JS-gesteuerten Hooks zwingend erforderlich.

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

leave mit done

Der @leave-Hook funktioniert genauso: Animieren Sie das Element heraus und rufen Sie anschließend done() auf, damit Vue es aus dem DOM entfernt.

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

after-enter für Aufräumarbeiten

@after-enter wird ausgeführt, sobald der Eintritt abgeschlossen ist. Verwenden Sie den Hook, um Inline-Styles zu entfernen, Transition-Eigenschaften zurückzusetzen oder nachfolgende Logik auszulösen.

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

CSS mit :css="false" überspringen

Wenn Sie ausschließlich mit JavaScript animieren, setzen Sie :css="false". Dadurch weist Vue die Erkennung von CSS-Klassen vollständig an und verlässt sich für die Zeitsteuerung ausschließlich auf Ihre done-Callbacks. Außerdem werden dadurch unbeabsichtigte Wechselwirkungen mit CSS vermieden.

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

GSAP integrieren

Bei der Verwendung von Animationsbibliotheken kommen JS-Hooks besonders gut zur Geltung. GSAP kann das Element animieren und done als onComplete-Callback übernehmen.

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

Abgebrochene Hooks

@enter-cancelled und @leave-cancelled werden ausgelöst, wenn ein Übergang unterbrochen wird, etwa weil Sie sehr schnell umschalten. Verwenden Sie sie, um laufende Tweens zu beenden und zurückgebliebene Zustände zu vermeiden.

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

Wann Sie JS-Hooks wählen sollten

Verwenden Sie JS-Hooks, wenn Sie Physik, dynamische Werte pro Element, die Integration einer Bibliothek oder eine präzise Ablaufsteuerung benötigen. Für einfache Ein- und Ausblendungen sowie Verschiebungen bleiben CSS-Klassen einfacher und performanter.

Kurzer Test

Warum übergeben Sie bei JavaScript-Hooks :css="false"?

Zusammenfassung

Sie haben die JS-Transition-Hooks kennengelernt: @before-enter (Anfangszustand festlegen), @enter/@leave (animieren und anschließend done aufrufen), @after-enter (Aufräumarbeiten) sowie :css="false", um CSS-Klassen zu umgehen, und die abgebrochenen Hooks für Unterbrechungen.

Häufig gestellte Fragen

Ist die Lektion „JavaScript-Transition-Hooks“ kostenlos?

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

@before-enter-, @enter-, @after-enter- und @leave-Hooks, GSAP für komplexe Animationen verwenden. 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 3 von 4.

Wie lange dauert die Lektion „JavaScript-Transition-Hooks“?

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