Conseils et bonnes pratiques pour utiliser les effets de transition pour réaliser un changement de page dans Vue

Conseils et bonnes pratiques pour utiliser les effets de transition pour implémenter le changement de page dans Vue

Dans les applications Web, le changement de page est un comportement interactif très important qui peut aider les utilisateurs à comprendre la structure et les fonctions de l'application. Cependant, si la vitesse de changement est trop rapide, les utilisateurs risquent de se sentir confus et déçus. S'il n'y a pas d'effets de transition, le changement de page semblera également rigide et peu naturel. Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser des effets de transition pour changer de page dans Vue. Cet article expliquera les techniques et les meilleures pratiques d'utilisation des effets de transition.

Les effets de transition dans Vue sont obtenus en ajoutant/supprimant des classes CSS lorsque des éléments entrent et sortent. Ces classes peuvent utiliser des styles CSS personnalisés pour obtenir divers effets de transition tels que des effets d'inhalation ou de pop-up, des effets de déformation, des changements de couleur, etc. Vue propose deux manières d'utiliser les effets de transition : via les propriétés de transition et d'animation du composant, et via le composant de transition intégré.

1. Grâce aux propriétés de transition et d'animation du composant

Dans les composants Vue, vous pouvez utiliser les propriétés de transition et d'animation pour ajouter des effets de transition. L'attribut transition est utilisé pour ajouter un effet de transition lorsqu'un élément entre ou sort, tandis que l'attribut animate est utilisé pour ajouter un effet de transition lorsqu'un élément est conservé. Ici, nous utilisons un simple effet de changement de page pour montrer comment utiliser les propriétés de transition et d'animation.

Tout d'abord, nous devons ajouter deux éléments de transition au modèle du composant Vue et définir leurs attributs de nom. Par exemple :

<transition name="page-fade">
  <router-view></router-view>
</transition>

<transition name="page-slide">
  <router-view></router-view>
</transition>

Dans le code ci-dessus, nous définissons deux éléments de transition, à savoir page-fade et page-slide. Ces noms seront utilisés pour ajouter des styles CSS personnalisés pour les effets de fondu et de glissement.

Ensuite, nous devons ajouter ces styles dans la feuille de style. Par exemple :

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

.page-fade-enter,
.page-fade-leave-to {
  opacity: 0;
}

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

Dans le code ci-dessus, nous utilisons la propriété de transition CSS pour définir l'effet de transition, où le temps de transition est de 0,5 seconde et la facilité de sortie est définie comme fonction d'assouplissement. Nous définissons également les styles lorsque l'élément entre et sort, où .page-fade-enter et .page-slide-enter sont les styles lorsque l'élément entre, .page-fade-leave-to et .page-slide-leave- to Est le style lorsque l'élément quitte, ces styles déclencheront l'effet de transition en ajoutant/supprimant des classes CSS.

Enfin, nous devons définir les conditions de déclenchement de l'effet de transition dans le composant Vue. Par exemple :

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

.page-fade-enter,
.page-fade-leave-to {
  opacity: 0;
}

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

Dans le code ci-dessus, nous utilisons la propriété de transition CSS pour définir l'effet de transition, où le temps de transition est de 0,5 seconde et la facilité de sortie est définie comme fonction d'assouplissement. Nous définissons également les styles lorsque l'élément entre et sort, où .page-fade-enter et .page-slide-enter sont les styles lorsque l'élément entre, .page-fade-leave-to et .page-slide-leave- to Est le style lorsque l'élément quitte, ces styles déclencheront l'effet de transition en ajoutant/supprimant des classes CSS.

Enfin, nous devons définir les conditions de déclenchement de l'effet de transition dans le composant Vue. Par exemple :

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

<transition name="page-slide" mode="out-in" appear>
  <router-view></router-view>
</transition>

Dans le code ci-dessus, nous utilisons l'attribut mode pour définir les conditions de déclenchement de l'effet de transition. L'attribut mode a deux valeurs, in-out et out-in, qui indiquent respectivement que l'effet de transition de l'entrée dans l'élément est déclenché en premier, puis l'effet de transition de la sortie de l'élément est déclenché, et l'effet de transition de la sortie de l'élément est déclenché en premier, puis l'effet de transition de l'entrée dans l'élément est déclenché. Nous pouvons également utiliser l'attribut apply pour spécifier si l'effet de transition doit être déclenché lors du premier chargement de l'élément.

2. Avec le composant de transition intégré

Vue fournit également un composant de transition intégré pour ajouter facilement des effets de transition. Ici, nous utilisons un simple effet d'animation de chargement pour montrer comment utiliser le composant de transition intégré.

Tout d'abord, nous devons ajouter un composant de transition au modèle du composant Vue et définir son attribut name comme chargement. Par exemple :

<transition name="loading">
  <div v-if="isLoading" class="loading">
    <div class="loader"></div>
  </div>
</transition>

Dans le code ci-dessus, nous utilisons la directive v-if pour définir si l'animation de chargement doit être affichée. Si la valeur de isLoading est vraie, l'animation de chargement est affichée, sinon elle ne s'affiche pas. Nous avons également mis en place un composant de transition nommé chargement pour ajouter des styles CSS personnalisés afin d'obtenir des effets d'animation de chargement.

Ensuite, nous devons ajouter ces styles dans la feuille de style. Par exemple :

.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.5s linear;
}

.loading-enter,
.loading-leave-to {
  opacity: 0;
}

Dans le code ci-dessus, nous utilisons la propriété de transition CSS pour définir l'effet de transition, où le temps de transition est de 0,5 seconde et linéaire est défini comme fonction d'assouplissement. Nous définissons également les styles lorsque l'élément entre et sort, où .loading-enter et .loading-leave-to sont les styles lorsque l'élément entre, et .loading-enter-active et .loading-leave-active sont les styles lorsque l'élément quitte , ces styles déclencheront des effets de transition en ajoutant/supprimant des classes CSS.

Enfin, nous devons déclencher l'ouverture et la fermeture de l'animation de chargement dans le composant Vue. Par exemple :

export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    load() {
      this.isLoading = true
      // do some heavy work
      this.isLoading = false
    }
  }
}

Dans le code ci-dessus, nous définissons une variable d'état nommée isLoading et l'exploitons dans la méthode de chargement pour simuler le processus de chargement de la page. Lorsque la valeur de isLoading est vraie, l'animation de chargement sera activée, sinon elle sera désactivée.

Résumé

En utilisant les effets de transition, nous pouvons améliorer l'expérience utilisateur lorsque les pages changent, se chargent et interagissent, augmentant ainsi efficacement l'engagement et la satisfaction des utilisateurs. Lors de l'utilisation des effets de transition, nous devons prêter attention aux points suivants :

1. Choisissez raisonnablement les effets de transition pour éviter des effets de commutation trop nombreux et trop rapides ;
2. Utilisez des styles CSS pour obtenir des effets de transition et évitez d'utiliser JavaScript ;
3. Utilisez des composants de transition intégrés et des attributs de transition pour éviter la duplication de code et des composants redondants ;
4. Définissez raisonnablement les conditions de déclenchement des effets de transition pour éviter les erreurs et les effets retardés.

Si vous rencontrez des problèmes avec les effets de transition lors de l'utilisation de Vue, vous pouvez vous référer aux conseils et bonnes pratiques fournis dans cet article pour les résoudre.

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!