Dans le développement d'interfaces modernes, la transition entre les différentes pages d'une application peut souvent paraître abrupte. Pour améliorer l'expérience utilisateur (UX) et rendre la navigation plus fluide, Vue 3 propose des outils puissants permettant d'intégrer des animations lors du changement de route.

Le rôle du composant Transition

Le composant <transition> est une fonctionnalité native de Vue 3 conçue pour appliquer des effets de transition sur des éléments ou des composants lors de leur insertion, mise à jour ou suppression du DOM. Il intervient principalement lors de l'utilisation de directives telles que v-if, v-show ou lors du basculement entre des composants dynamiques.

Vue 3 gère automatiquement le cycle de vie de l'animation en ajoutant et supprimant des classes CSS spécifiques à des moments précis :

• Phase d'entrée : v-enter-from (début), v-enter-active (déroulement), v-enter-to (fin).
• Phase de sortie : v-leave-from (début), v-leave-active (déroulement), v-leave-to (fin).

Exemple de base : Animation d'opacité

Voici comment implémenter une transition simple de fondu sur un élément conditionnel :

<template>
  <button @click="isElementVisible = !isElementVisible">Basculer l'affichage</button>
  <transition name="fade-effect">
    <div v-if="isElementVisible" class="status-card">
      Contenu interactif
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const isElementVisible = ref(true)
</script>

<style scoped>
.status-card {
  padding: 20px;
  background-color: #f0f4f8;
  border-radius: 8px;
}

.fade-effect-enter-active,
.fade-effect-leave-active {
  transition: opacity 0.4s ease-in-out;
}

.fade-effect-enter-from,
.fade-effect-leave-to {
  opacity: 0;
}
</style>

Intégration avec Vue Router

Pour animer le changement de page, il est nécessaire de combiner le composant <router-view> avec les slots de composants dynamiques. La structure repose sur l'utilisation du slot Component fourni par Vue Router.

<router-view v-slot="{ Component }">
  <transition 
    name="page-slide" 
    mode="out-in"
    enter-active-class="animate__animated animate__fadeInRight"
    leave-active-class="animate__animated animate__fadeOutLeft"
  >
    <component :is="Component" :key="$route.path" />
  </transition>
</router-view>

Analyse des mécanismes clés

1. Le Slot de router-view : L'attribut v-slot="{ Component }" permet d'extraire le composant correspondant à la route actuelle. Cela offre la flexibilité nécessaire pour l'envelopper dans un composant de transition avant son rendu final.

2. Le mode de transition : L'utilisation de mode="out-in" garantit que l'ancien composant termine sa transition de sortie avant que le nouveau ne commence sa transition d'entrée, évitant ainsi un chevauchement visuel disgracieux.

3. Utilisation de bibliothèques tierces : Dans l'exemple ci-dessus, les attributs enter-active-class et leave-active-class permettent d'utiliser directement des classes provenant de bibliothèques comme Animate.css, simplifient ainsi la création d'animations complexes (rebonds, glissements, etc.).

4. L'importance de la directive :key : C'est l'élément crucial pour déclencher l'animation. Par défaut, si deux routes utilisent le même composant technique, Vue pourrait tenter de réutiliser l'instance existante pour optimiser les performances. En liant :key="$route.path", on force Vue à considérer chaque changement d'URL comme la création d'un nouveau nœud, ce qui déclenche systématiquement les hooks de transition.

Considérations sur les performances

Bien que les animations enrichissent l'interface, elles doivent rester légères. Il est recommandé de privilégier les propriétés CSS opacity et transform pour les animations, car elles bénéficient de l'accélération matérielle du GPU, garantissant une fluidité optimale même sur les appareils mobiles.