Le composant Transition

Bienvenue dans la chambre holographique du NOVA LAB ! Nous sommes en 2087 - les interfaces de la station spatiale doivent être non seulement fonctionnelles, mais aussi élégamment animées. Quand la Dre Nova ouvre le panneau de diagnostic du réacteur, les données n'apparaissent pas d'un coup - elles glissent en douceur sur l'écran, et à la fermeture, elles s'estompent avec grâce. Vue fournit un composant intégré <Transition> qui te permet d'ajouter exactement ce type d'animations fluides d'entrée et de sortie à tes éléments.

Qu'est-ce que <Transition> ?

<Transition> est un composant intégré de Vue qui ajoute et retire automatiquement des classes CSS quand un élément apparaît et disparaît. Il ne rend aucun élément DOM supplémentaire - c'est un « wrapper invisible » :

1<Transition name="fade">
2  <div v-if="showPanel">Panneau d'état de la station</div>
3</Transition>

Quand showPanel passe de false à true, Vue ajoute les classes CSS appropriées à l'élément <div>, déclenchant l'animation d'entrée. Quand la valeur revient à false, Vue déclenche l'animation de sortie, et ce n'est qu'une fois celle-ci terminée qu'il retire l'élément du DOM.

Limitation importante : <Transition> enveloppe exactement un élément ou composant. Si tu as besoin d'animer une liste - utilise <TransitionGroup> (tu l'apprendras plus loin dans ce module).

Les 6 classes CSS de Transition

Vue ajoute et retire automatiquement 6 classes CSS pendant le cycle de vie de l'animation. C'est la base pour comprendre le système de transitions :

Enter - quand l'élément apparaît :

• v-enter-from - l'état de départ de la transition d'entrée. Ajoutée avant l'insertion de l'élément, retirée après une frame.
• v-enter-active - active pendant toute la phase d'entrée. C'est ici que tu définis transition ou animation.
• v-enter-to - l'état d'arrivée de la transition d'entrée. Ajoutée après une frame (quand -from est retirée), retirée à la fin de l'animation.

Leave - quand l'élément disparaît :

• v-leave-from - l'état de départ de la transition de sortie. Ajoutée immédiatement quand la sortie est déclenchée.
• v-leave-active - active pendant toute la phase de sortie.
• v-leave-to - l'état d'arrivée de la transition de sortie. Ajoutée après une frame, retirée à la fin de l'animation.

La séquence des événements ressemble à ceci :

1Enter: enter-from → (1 frame) → enter-to + enter-active → (fin de l'animation) → nettoyage
2Leave: leave-from → (1 frame) → leave-to + leave-active → (fin de l'animation) → élément retiré

Effet de fondu simple

L'effet le plus simple et le plus utilisé - apparition et disparition en douceur :

1.fade-enter-active,
2.fade-leave-active {
3  transition: opacity 0.5s ease;
4}
5
6.fade-enter-from,
7.fade-leave-to {
8  opacity: 0;
9}

Les classes -from et -to définissent les états de début et de fin (dans ce cas : opacity: 0 pour l'invisibilité). Les classes -active définissent la durée, le type d'accélération, et quelles propriétés animer.

Effet de glissement

Les animations peuvent combiner plusieurs propriétés CSS à la fois :

1.slide-enter-active,
2.slide-leave-active {
3  transition: all 0.3s ease;
4}
5
6.slide-enter-from {
7  opacity: 0;
8  transform: translateY(-20px);
9}
10
11.slide-leave-to {
12  opacity: 0;
13  transform: translateY(20px);
14}

L'élément entre en glissant depuis le haut, et sort en glissant vers le bas - comme un panneau d'alarme de la station NOVA LAB qui descend depuis le haut de l'écran.

v-if vs v-show avec Transition

<Transition> fonctionne avec v-if comme avec v-show, mais leur comportement diffère :

• v-if - l'élément est physiquement ajouté au DOM puis retiré. L'animation de sortie se termine avant que l'élément ne soit retiré. Mieux adapté aux éléments qu'on bascule rarement.
• v-show - l'élément est toujours présent dans le DOM, seul display: none est basculé. Basculement plus rapide, mieux adapté aux éléments qui apparaissent et disparaissent fréquemment (par exemple un panneau d'alertes).

1<template>
2  <div class="control-panel">
3    <button @click="showStatus = !showStatus">Basculer le panneau</button>
4
5    <!-- v-if: élément ajouté/retiré du DOM -->
6    <Transition name="fade">
7      <div v-if="showStatus" class="status-panel">
8        État du réacteur : ONLINE
9      </div>
10    </Transition>
11
12    <!-- v-show: élément toujours dans le DOM, display basculé -->
13    <Transition name="fade">
14      <div v-show="showAlert" class="alert-panel">
15        Attention : la température monte !
16      </div>
17    </Transition>
18  </div>
19</template>
20
21<script setup>
22import { ref } from 'vue'
23
24const showStatus = ref(true)
25const showAlert = ref(false)
26</script>

Quand utiliser Transition ?

• Afficher/masquer des modales, des info-bulles, des menus déroulants
• Basculer entre des vues (v-if/v-else)
• Animer l'entrée d'un élément au chargement
• Avertissements et notifications sur la station spatiale

1<script setup>
2import { ref } from 'vue'
3
4const showPanel = ref(true)
5</script>
6
7<template>
8  <div class="nova-lab">
9    <h1>NOVA LAB - Démo Transition</h1>
10
11    <button @click="showPanel = !showPanel" class="btn">
12      {{ showPanel ? 'Masquer le panneau' : 'Afficher le panneau' }}
13    </button>
14
15    <Transition name="fade">
16      <div v-if="showPanel" class="status-panel">
17        <h3>État de la station</h3>
18        <p>Systèmes : Opérationnels</p>
19        <p>Température : -63°C</p>
20        <p>Pression : 0.6 kPa</p>
21      </div>
22    </Transition>
23  </div>
24</template>
25
26<style scoped>
27.nova-lab {
28  background: #0a0e27;
29  color: #00ff88;
30  min-height: 100vh;
31  padding: 20px;
32  font-family: monospace;
33}
34h1 { color: #00ff88; margin-bottom: 20px; }
35
36.btn {
37  background: #00b4d8;
38  color: white;
39  border: none;
40  padding: 10px 20px;
41  border-radius: 8px;
42  cursor: pointer;
43  font-size: 14px;
44  margin-bottom: 15px;
45}
46
47.status-panel {
48  background: rgba(0, 180, 216, 0.1);
49  border: 2px solid #00b4d8;
50  padding: 20px;
51  border-radius: 12px;
52}
53
54/* Classes Transition */
55.fade-enter-active,
56.fade-leave-active {
57  transition: opacity 0.5s ease;
58}
59
60.fade-enter-from,
61.fade-leave-to {
62  opacity: 0;
63}
64</style>