0Pricing
Vue Academy · Leçon

Le composant Transition

v-enter-from, v-enter-active, v-enter-to, classes v-leave-*, prop name pour les classes personnalisées.

Le composant Transition est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Ce que fait le composant Transition

Vue fournit un composant <Transition> intégré qui applique des animations d’entrée et de sortie à un élément ou composant unique lorsqu’il est inséré ou retiré via v-if ou v-show.

Il n’effectue lui-même aucun rendu d’élément DOM supplémentaire : il gère uniquement les classes CSS et le minutage de son enfant.

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

Un seul élément

<Transition> attend exactement un enfant direct. Entourer plusieurs éléments frères ne fonctionnera pas : utilisez <TransitionGroup> pour les listes.

L’enfant doit être activé ou désactivé avec v-if, v-show ou un composant dynamique.

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

Les six classes de transition

Lors d’une entrée ou d’une sortie, Vue ajoute et retire automatiquement six classes dans un ordre précis.

  • v-enter-from / v-leave-from : état initial
  • v-enter-active / v-leave-active : phase active (placez-y la transition)
  • v-enter-to / v-leave-to : état final
/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Nommer votre transition

Donnez à la transition une propriété name afin que le préfixe des classes passe de v- à votre nom. Avec name="fade", les classes deviennent fade-enter-from, fade-enter-active, etc.

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

Un exemple complet de fondu

Le fondu classique anime l’opacity. L’élément commence par être entièrement transparent, la classe active déclare la transition et la classe de destination le rend complètement opaque.

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

La séquence d’entrée étape par étape

Lorsque l’élément est inséré :

  1. fade-enter-from et fade-enter-active sont ajoutées avant le rendu (opacité de 0).
  2. À l’image suivante, fade-enter-from est retirée et fade-enter-to est ajoutée : l’opacité s’anime alors vers 1.
  3. Lorsque la transition se termine, les classes active et to sont toutes deux retirées.
/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

La séquence de sortie

La sortie reprend le fonctionnement de l’entrée avec les classes leave. Vous réutiliserez souvent la même règle active dans les deux sens.

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

v-if ou v-show

Les deux déclenchent des transitions. v-if monte et démonte réellement l’élément, tandis que v-show le conserve dans le DOM et bascule son affichage. Avec v-show, Vue gère le changement d’affichage autour de la phase active afin que l’animation reste visible.

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

Apparition lors du rendu initial

Par défaut, la transition ne s’exécute pas lors du premier rendu. Ajoutez la propriété appear afin que l’animation d’entrée soit jouée lorsque le composant est monté pour la première fois.

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

Animer entre deux éléments

Utilisez v-if / v-else dans une seule transition pour permuter deux éléments. Donnez à chacun une key unique s’ils utilisent la même balise, afin que Vue les traite comme des éléments distincts.

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

Mouvements réduits et accessibilité

Respectez les utilisateurs qui préfèrent limiter les mouvements. Désactivez ou raccourcissez les transitions avec la requête média prefers-reduced-motion afin que les animations ne provoquent pas d’inconfort.

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

Vérification rapide

Que définit fade-enter-from ?

Récapitulatif

Vous avez découvert le composant intégré <Transition> : il entoure un élément activé par v-if/v-show, applique six classes CSS (enter-from, enter-active, enter-to et leurs équivalents de sortie), accepte un préfixe name, la propriété appear pour le premier rendu et la propriété mode pour les permutations.

Questions Fréquemment Posées

La leçon « Le composant Transition » est-elle gratuite ?

Oui — le texte complet de « Le composant Transition » 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 « Le composant Transition » ?

v-enter-from, v-enter-active, v-enter-to, classes v-leave-*, prop name pour les classes personnalisées. 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 1 sur 4.

Combien de temps prend la leçon « Le composant Transition » ?

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