Vue Academy · Les

JavaScript-transitionhooks

@before-enter-, @enter-, @after-enter- en @leave-hooks, GSAP gebruiken voor complexe animaties.

Les 3 van 413 stappen

JavaScript-transitionhooks is een gratis Vue Academy-les op CoddyKit. Dit is les 3 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.

Waarom JavaScript-hooks

CSS-klassen dekken de meeste gevallen, maar voor sommige animaties is JavaScript nodig, bijvoorbeeld voor het integreren van bibliotheken zoals GSAP, het animeren van een canvas of het berekenen van dynamische waarden. <Transition> biedt hiervoor levenscyclus-hooks.

De beschikbare hooks

Vue geeft voor elke fase gebeurtenissen af: @before-enter, @enter, @after-enter, @enter-cancelled en de bijbehorende leave-hooks.

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

before-enter stelt de beginstatus in

@before-enter ontvangt het DOM-element en wordt vóór het invoegen uitgevoerd. Gebruik deze hook om de beginstijlen in te stellen, net zoals je dat met een klasse enter-from zou doen.

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

enter ontvangt el en done

@enter ontvangt twee argumenten: het element en een callback done. Animeer het element en roep daarna done() aan, zodat Vue weet dat de overgang is voltooid.

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 });
}

Roep done altijd aan

Als je done() vergeet, wacht Vue voor altijd en wordt de overgang nooit voltooid. after-enter wordt dan nooit uitgevoerd en het element kan in een half geanimeerde toestand blijven. In JavaScript-gestuurde hooks is deze aanroep verplicht.

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

leave met done

De hook @leave werkt op dezelfde manier: animeer het element weg en roep daarna done() aan, zodat Vue het uit de DOM kan verwijderen.

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

after-enter voor opruimen

@after-enter wordt uitgevoerd zodra het binnenkomen is voltooid. Gebruik deze hook om inline-stijlen te verwijderen, overgangseigenschappen terug te zetten of vervolblogica te starten.

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

CSS overslaan met :css="false"

Wanneer je uitsluitend met JavaScript animeert, stel je :css="false" in. Hiermee laat je Vue de detectie van CSS-klassen volledig overslaan, zodat de timing uitsluitend afhangt van je callbacks done. Zo voorkom je ook onbedoelde interferentie van CSS.

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

GSAP integreren

JavaScript-hooks komen goed tot hun recht met animatiebibliotheken. GSAP kan het element vloeiend animeren en done als callback onComplete accepteren.

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

Geannuleerde hooks

@enter-cancelled en @leave-cancelled worden uitgevoerd als een overgang wordt onderbroken, bijvoorbeeld wanneer je snel schakelt. Gebruik ze om lopende animaties te stoppen en een achtergebleven toestand te voorkomen.

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

Wanneer kies je voor JavaScript-hooks

Gebruik JavaScript-hooks wanneer je fysica, dynamische waarden per element, integratie met een bibliotheek of een nauwkeurige volgorde nodig hebt. Voor eenvoudige vervagingen en verschuivingen blijven CSS-klassen eenvoudiger en leveren ze betere prestaties.

Korte controle

Waarom geef je :css="false" mee met JavaScript-hooks?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt de JavaScript-overgangshooks geleerd: @before-enter (de beginstatus instellen), @enter/@leave (animeren en daarna done aanroepen), @after-enter (opruimen), plus :css="false" om CSS-klassen over te slaan en de geannuleerde hooks voor onderbrekingen.

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “JavaScript-transitionhooks” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “JavaScript-transitionhooks”, 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 “JavaScript-transitionhooks”?

@before-enter-, @enter-, @after-enter- en @leave-hooks, GSAP gebruiken voor complexe animaties. 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 3 van 4.

Hoe lang duurt de les “JavaScript-transitionhooks”?

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

← Terug naar Vue Academy