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 300ff3b250bc578ac201dd5fb34a0004 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 300ff3b250bc578ac201dd5fb34a0004 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 300ff3b250bc578ac201dd5fb34a0004, nous utilisons 975b587bf85a482ea10b0a28848e78a4 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 c9ccee2e6ea535a969eb3f532ad9fe89 Ajout d'un effet de transition de transparence de 0 à 1 lors de l'insertion et de la suppression.

Enfin, nous enveloppons la balise 300ff3b250bc578ac201dd5fb34a0004 dans le composant qui doit être animé ou dans le composant racine.

En utilisant le code ci-dessus, lorsque nous changeons d'itinéraire dans le projet Vue, la page aura un effet de transition en fondu entrant et sortant.

En plus des effets de fondu d'entrée et de sortie, nous pouvons également implémenter différents effets de transition selon les besoins, tels que des effets de glissement, des effets de zoom, etc. Pour des opérations spécifiques, veuillez vous référer à la documentation officielle de Vue.

Pour résumer, les étapes pour implémenter les effets d'animation de commutation de routage avant et arrière dans le projet Vue sont les suivantes :

1. Introduire le composant de transition de Vue 300ff3b250bc578ac201dd5fb34a0004.
2. Définissez le style de l'animation de transition dans la balise 300ff3b250bc578ac201dd5fb34a0004
3. Utilisez 975b587bf85a482ea10b0a28848e78a4 pour afficher les composants correspondant à l'itinéraire actuel.
4. Ajoutez différents effets de transition en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!