0Pricing
Vue Academy · Leçon

Hooks de transition JavaScript

Hooks @before-enter, @enter, @after-enter, @leave, utilisation de GSAP pour les animations complexes.

Hooks de transition JavaScript est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi utiliser les points d’accroche JavaScript

Les classes CSS couvrent la plupart des cas, mais certaines animations nécessitent JavaScript : intégrer des bibliothèques comme GSAP, animer un canvas ou calculer des valeurs dynamiques. <Transition> expose des points d’accroche du cycle de vie précisément pour cela.

Les points d’accroche disponibles

Vue émet des événements pour chaque phase : @before-enter, @enter, @after-enter, @enter-cancelled et les points d’accroche correspondants pour la sortie.

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

before-enter définit l’état initial

@before-enter reçoit l’élément du DOM et s’exécute avant son insertion. Utilisez-le pour définir les styles de départ, comme le ferait une classe enter-from.

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

enter reçoit l’élément et le rappel de fin

@enter reçoit deux arguments : l’élément et un rappel done. Animez l’élément, puis appelez done() une fois l’animation terminée afin que Vue sache que la transition est achevée.

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

Appelez toujours done

Si vous oubliez done(), Vue attend indéfiniment et la transition ne se termine jamais : after-enter n’est jamais déclenché et l’élément peut rester dans un état partiellement animé. Cet appel est obligatoire dans les points d’accroche pilotés par JS.

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

leave avec done

Le point d’accroche @leave fonctionne de la même manière : animez la sortie de l’élément, puis appelez done() afin que Vue le supprime du DOM.

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

after-enter pour le nettoyage

@after-enter s’exécute une fois l’entrée terminée. Utilisez-le pour supprimer les styles en ligne, réinitialiser les propriétés de transition ou déclencher une logique complémentaire.

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

Ignorer le CSS avec :css="false"

Lorsque l’animation est réalisée entièrement en JS, définissez :css="false". Vue ignore ainsi complètement la détection des classes CSS et s’appuie uniquement sur vos rappels done pour le minutage. Cela évite également les interférences accidentelles du CSS.

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

Intégrer GSAP

Les points d’accroche JS sont particulièrement utiles avec les bibliothèques d’animation. GSAP peut animer progressivement l’élément et accepter done comme rappel onComplete.

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

Points d’accroche annulés

@enter-cancelled et @leave-cancelled se déclenchent lorsqu’une transition est interrompue, par exemple si l’utilisateur active et désactive rapidement un élément. Utilisez-les pour arrêter les animations en cours et éviter de conserver un état résiduel.

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

Quand choisir les points d’accroche JS

Choisissez les points d’accroche JS lorsque vous avez besoin de physique, de valeurs dynamiques propres à chaque élément, de l’intégration d’une bibliothèque ou d’un enchaînement précis. Pour de simples apparitions en fondu et glissements, les classes CSS restent plus simples et plus performantes.

Vérification rapide

Pourquoi transmettre :css="false" avec des points d’accroche JavaScript ?

Récapitulatif

Vous avez appris les points d’accroche de transition JS : @before-enter (définir l’état initial), @enter/@leave (animer, puis appeler done), @after-enter (nettoyer), ainsi que :css="false" pour contourner les classes CSS et les points d’accroche d’annulation pour gérer les interruptions.

Questions Fréquemment Posées

La leçon « Hooks de transition JavaScript » est-elle gratuite ?

Oui — le texte complet de « Hooks de transition JavaScript » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Hooks de transition JavaScript » ?

Hooks @before-enter, @enter, @after-enter, @leave, utilisation de GSAP pour les animations complexes. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Hooks de transition JavaScript » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Le composant Transition
  2. Transitions et animations CSS
  3. Hooks de transition JavaScript
  4. TransitionGroup pour les animations de listes
← Retour à Vue Academy