Comment ajouter un effet de fondu au routage Vue

À mesure que les applications Web deviennent plus complexes, les frameworks front-end sont de plus en plus utilisés. Vue.js est actuellement l'un des frameworks JavaScript les plus populaires. Sa fonction de routage permet aux utilisateurs de naviguer en douceur dans l'application. Cet article vous présentera comment ajouter des effets de fondu au routage Vue pour améliorer l'expérience utilisateur.

Bases du routage Vue

Avant de commencer, nous devons comprendre quelques connaissances de base du routage Vue. Le routage Vue.js est implémenté via Vue Router. Après avoir installé Vue Router dans le projet et l'avoir présenté, nous pouvons configurer la table de routage et la vue de routage. La relation de mappage entre les chemins d'accès et les composants correspondants est définie dans la table de routage. Dans la vue de routage, le composant correspondant sera mis en correspondance en fonction du chemin et rendu sur la page.

Ajouter un effet de fondu

Dans certains cas, nous devons ajouter des effets visuels à la page de saut pour améliorer l'expérience utilisateur. L’un des effets couramment utilisés est le fondu. Grâce à l'effet de fondu, les utilisateurs peuvent accéder aux pages plus naturellement.

Nous pouvons utiliser l'effet de transition de Vue pour obtenir cet effet de fondu. Les transitions sont décrites dans la documentation Vue.js comme « ajout de transitions lors de l'insertion/suppression d'éléments ». Vue fournit une variété d'effets de transition, notamment des fondus entrants et sortants, des mises à l'échelle, des rotations, etc. Dans cet article, nous nous concentrerons sur la mise en œuvre de l'effet de fondu.

1. Créer une animation CSS

Tout d'abord, nous devons créer une animation CSS. L'avantage de l'utilisation de l'animation CSS est que le code est simple et facile à maintenir, et qu'il n'est pas nécessaire de recourir à des bibliothèques ou des plug-ins tiers. En CSS, nous pouvons ajouter des effets de transition aux éléments via l'attribut transition. Dans cet exemple, nous ajouterons un effet de fondu à la vue de routage.

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Dans ce CSS, nous avons ajouté des propriétés de transition pour les états profonds et fondus de l'élément. Tout d'abord, le temps de l'effet de transition est réglé sur 0,5 s (c'est-à-dire la durée de l'effet de fondu entrant et sortant de l'élément), puis différents paramètres sont définis pour les deux états lors de l'entrée et de la sortie. Pour l'état d'entrée, nous définissons l'opacité par défaut sur 0, ce qui représente un effet de fondu entrant transparent ; pour l'état de sortie, nous définissons l'opacité sur 0, ce qui représente un effet de fondu sortant transparent.

2. Ajouter une classe à la vue de routage

Dans la vue de routage, nous utiliserons le composant intégré Nous pouvons utiliser des sélecteurs CSS pour définir le nom de la classe afin d'appliquer des styles en CSS.

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

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

Dans le code ci-dessus, nous définissons un composant de transition L'attribut name précise le nom du composant, ici nous le nommons fade. L'attribut mode spécifie le mode d'entrée et de sortie. Ici, nous le définissons sur out-in, indiquant le mode de sortie puis d'entrée. Enfin, dans le CSS, nous avons ajouté le nom de classe correspondant pour ajouter l'effet de fondu à la .

Conclusion

Dans cet article, nous proposons une méthode de mise en œuvre simple de l'effet de fondu de saut de routage Vue. En utilisant le composant intégré à Vue et l'animation CSS, nous pouvons facilement ajouter des effets de fondu aux itinéraires Vue pour améliorer l'expérience utilisateur. J'espère que cet article vous sera utile et pourra ajouter de nouvelles idées à votre développement Vue.

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!