L'intégration d'animations lors du changement de page est un levier essentiel pour transformer une Single Page Application (SPA) statique en une interface fluide et moderne. En exploitant le composant natif <transition> de Vue.js, il devient possible d'animer l'élément <router-view> avec précision.

Mise en œuvre fondamentale

La méthode la plus directe consiste à encapsuler la vue de routage dans une balise de transition. Cela applique un effet global à chaque changement d'URL.

<transition name="fondu" mode="out-in">
  <router-view></router-view>
</transition>

Le paramètre mode="out-in" est crucial ici : il garantit que l'ancien composant disparaît complètement avant que le nouveau n'apparaisse, évitant ainsi les chevauchements visuels disgracieux dans le flux du document.

Définition d'animations par composant

Parfois, une animation globale ne suffit pas. On peut définir des transitions spécifiques directement au sein des composants de page pour refléter leur identité visuelle propre.

// Page d'accueil
const Accueil = {
  template: `
    <transition name="glissement-bas">
      <section class="contenu-principal">Bienvenue sur l'accueil</section>
    </transition>
  `
}

// Page Profil
const Profil = {
  template: `
    <transition name="zoom">
      <section class="contenu-profil">Votre profil utilisateur</section>
    </transition>
  `
}

Logique de navigation dynamique

Pour des interfaces plus complexes, comme une navigation hiérarchique, l'animation doit souvent dépendre de la direction du mouvement (aller vers un détail ou revenir à la liste). On utilise alors une liaison dynamique sur l'attribut name.

<transition :name="typeMouvement">
  <router-view></router-view>
</transition>

La logique de calcul peut être placée dans un observateur (watcher) sur l'objet $route :

export default {
  data() {
    return {
      typeMouvement: 'entree-standard'
    }
  },
  watch: {
    '$route'(destination, origine) {
      const profondeurCible = destination.path.split('/').length;
      const profondeurSource = origine.path.split('/').length;
      
      // On détermine si l'utilisateur monte ou descend dans l'arborescence
      this.typeMouvement = profondeurCible < profondeurSource ? 'slide-droite' : 'slide-gauche';
    }
  }
}

Recommandations techniques et performances

• Optimisation GPU : Privilégiez les propriétés CSS transform (translate, scale) et opacity. Contrairement aux modifications de width ou margin, elles ne déclenchent pas de recalcul complet du layout (Reflow).
• Gestion de l'état : Si vous souhaitez conserver l'état des composants lors des transitions, combinez <keep-alive> avec votre système d'animation.
• Stabilité visuelle : Pour éviter les "sauts" de page, fixez une position absolue temporaire aux éléments sortants via CSS pendant la phase -leave-active.

<transition name="fade" appear>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

L'ajout de l'attribut appear permet d'activer l'animation dès le premier chargement de l'application, offrant une entrée en scène soignée dès l'arrivée de l'utilisateur.