Utiliser le composant de transition dans Vue

Jusqu’à ce que je passe la certification Vue.js en avril dernier et qui testa ma compréhension du concept, je ne l’avais pas entièrement compris.

Comment fonctionnent donc Transition et TransitionGroup ?

Les cas d’usage

Si vous lisez la documentation correctement (en prenant votre temps), vous comprendrez facilement :

La transition peut être déclenchée par l’un des éléments suivants :

1. Rendu conditionnel via v-if
2. Affichage conditionnel via v-show > 3.
3. le basculement des composants dynamiques via l’élément spécial <composant> > 4. le basculement des composants dynamiques via l’élément spécial <composant>.
4. Modification de l’attribut spécial `key

Quelle est la signification de chaque cas d’usage

Les cas 1 et 2 se ressemblent beaucoup : prenons pour exemple cette template, avec v-if :

1
2
3
4

<button @click="show=!show">Afficher</button>
<Transition>
  <p v-if="show">Bonjour</p>
</Transition>

Lorsque show change, Vue bascule le paragraphe et exécute la transition.

Vous pouvez remplacer v-if par v-show et vous obtiendrez exactement la même chose.

Qu’en est-il du cas d’usage numéro 3 ? Dans le cas d’un carousel d’images, nous pourrions avoir ceci :

1
2
3
4
5
6

<Transition>
  <li :key="«" `image-${currentImage.title}` »>
    <!-- this is a Scope slot -->
    <slot :item="«" { ...currentImage } »></slot>
  </li>
</Transition>

Lorsque vous passez d’une image à une autre, currentImage.title est mis à jour ainsi que la valeur :key. Cela déclenche alors la transition.

Le cas d’usage numéro 4 était le plus difficile à comprendre. Il concerne l’élément spécial <component> que vous pouvez utiliser avec le routeur de Vue. Voici un exemple :

1
2
3
4
5

<router-link v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" :key="$route.path"></component>
  </transition>
</router-link>

En fait, la transition s’exécutera à chaque fois que le chemin de la route changera.

N’oubliez pas non plus que <Transition> ne peut contenir qu’un seul élément ou composant. Si le contenu est un composant, le composant doit également avoir un seul élément racine.

Cela ne fonctionnerait donc pas :

1
2
3
4
5

<button @click="show = !show">Afficher</button>
<Transition>
  <p v-if="show">Bonjour</p>
  <p>le monde</p>
</Transition>

Toutefois, cela ne signifie pas que vous ne pouvez pas faire défiler plusieurs éléments comme dans cet exemple :

1
2
3
4
5

<Transition>
  <button v-if="docState === 'saved'">Editer</button>
  <button v-else-if="docState === 'edited'">Sauvegarder</button>
  <button v-else-if="docState === 'editing'">Annuler</button>
</Transition>

Learn More

Voir le code complet de cet exemple dans l’environnement de démonstration de Vue.js.

Il y a plus d’informations sur l’utilisation des transitions, comme les modes de transition, les transitions entre composants ou les transitions dynamiques, alors n’hésitent pas à consulter la documentation.

Crédits: l’image d’en-tête provient de Federico Beccari sur Unsplash.