Comment implémenter des effets d'animation de commutation de routage avant et arrière dans un projet Vue ?

Comment implémenter des effets d'animation de commutation de routage avant et arrière dans un projet Vue ?

Dans les projets Vue, nous utilisons souvent Vue Router pour gérer le routage. Lorsque nous changeons d'itinéraire, le changement de page s'effectue instantanément sans effet de transition. Si nous souhaitons ajouter des effets d'animation au changement de page, nous pouvons utiliser le système de transition de Vue.

Le système de transition de Vue offre un moyen simple d'ajouter des effets de transition lorsque des éléments sont insérés ou supprimés. Nous pouvons utiliser cette fonctionnalité pour animer la commutation de routage avant et arrière.

Tout d'abord, nous devons introduire le composant de transition de Vue Il peut être introduit dans le composant racine ou dans le composant où l'animation doit être ajoutée.

Ensuite, nous devons définir le style de l'animation de transition dans la balise Le composant de transition de Vue a les noms de classe CSS suivants à utiliser :

• enter : l'état de départ lors de l'insertion, sera appliqué immédiatement avant l'insertion de l'animation
• enter-active : l'état de fin lors de l'insertion, sera déclenché lors de l'insertion de l'animation Appliqué après une image jusqu'à ce que l'animation d'insertion soit terminée
• leave : L'état de départ lors de la suppression, sera appliqué immédiatement avant l'animation de suppression
• leave-active : L'état de fin lors de la suppression, sera appliqué une image après l'animation de suppression. déclenché, jusqu'à Terminer l'animation de suppression

Voici un exemple de code d'un exemple d'effet d'animation :

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

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

Dans le code ci-dessus, nous utilisons un effet de transition nommé "fade" et utilisons le mode "out-in". Cela signifie que lorsque vous changez d'itinéraire, quittez d'abord l'ancienne page, puis accédez à la nouvelle page.

Dans la balise , nous utilisons Les noms de classes CSS correspondants sont ajoutés à l’entrée et à la sortie.

Ensuite, nous définissons le style de l'animation de transition via la balise