Application de la fonction d'effet de transition de changement de page dans le document Vue

Vue est un framework JavaScript frontal populaire pour créer des applications Web dynamiques et interactives. Dans Vue, les effets de transition constituent une partie importante du changement de page. Les effets de transition de changement de page peuvent ajouter une sensation dynamique et fluide au changement de page, améliorant ainsi l'expérience utilisateur. Une variété de fonctions d'effets de transition sont fournies dans la documentation Vue. Cet article explique comment utiliser ces fonctions dans les applications Vue.

1. Nom de la classe de transition

La fonction d'effet de transition dans Vue est implémentée en ajoutant un nom de classe spécifique à l'attribut de classe de l'élément. Voici plusieurs noms de classes de transition courants :

• v-enter : prend effet lorsque l'élément est inséré et peut définir l'état de départ de la transition.
• v-enter-active : Il prend effet lorsque l'élément est inséré et est appliqué pendant le processus de transition. En transition ou en animation, il est utilisé pour définir la durée, le temps de retard et l'effet d'animation de l'effet de transition.
• v-enter-to : prend effet lorsque l'élément est inséré et peut définir l'état final de la transition.
• v-leave : Effective lorsque l'élément est supprimé, vous pouvez définir l'état de départ de la transition.
• v-leave-active : prend effet lorsque l'élément est supprimé, appliqué pendant le processus de transition.
• v-leave-to : Effective lorsque l'élément est supprimé, vous pouvez définir l'état final de la transition.

2. Fonction de transition

Vue fournit plusieurs fonctions de transition pour répondre à différents besoins. Voici quelques fonctions de transition couramment utilisées :

• transition : enveloppe l'élément ou le composant qui doit faire l'objet d'une transition, où l'attribut name spécifie le préfixe de classe statique.
• transition-group : Encapsule la liste des éléments ou des composants qui doivent faire l'objet d'une transition, où l'attribut name spécifie le préfixe de classe statique.
• Fonction de transition dynamique : dans Vue, les utilisateurs peuvent personnaliser la fonction de transition pour obtenir l'effet souhaité. Vous pouvez transmettre un attribut de nom dynamique à la transition ou au groupe de transition, et cet attribut de nom peut être renvoyé par une fonction.

3. Application pratique

Afin de mieux comprendre l'application de la fonction d'effet de transition Vue, nous allons créer ci-dessous une application Vue simple et y utiliser la fonction d'effet de transition. Ici, nous utilisons Vue CLI pour créer un nouveau projet Vue. Tout d'abord, exécutez la commande suivante dans le terminal :

vue create my-app
cd my-app
npm run serve

Ensuite, nous pouvons ajouter le code suivant dans le fichier App.vue :

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="toggle">Toggle message</button>
    <transition name="fade">
      <p v-if="messageShown">Hello, Vue!</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Vue transition demo',
        messageShown: false,
      }
    },
    methods: {
      toggle() {
        this.messageShown = !this.messageShown;
      },
    },
  }
</script>

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

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

Dans le code ci-dessus, nous avons créé un composant Vue qui contient un bouton et un élément de paragraphe. . Lorsque l'utilisateur clique sur le bouton, si l'élément de paragraphe est affiché, masquez-le, sinon affichez-le. Sur l'élément paragraphe, nous utilisons le composant de transition et transmettons fade comme valeur de l'attribut name au composant de transition. De plus, nous avons également défini les classes .fade-enter-active, .fade-leave-active, .fade-enter et .fade-leave-to dans la balise style comme implémentation formelle de la fonction d'effet de transition.

Enfin, nous pouvons prévisualiser notre application Vue dans le navigateur. Lorsque nous cliquons sur le bouton "Basculer le message", l'élément de paragraphe disparaîtra ou apparaîtra en douceur, en utilisant la fonction d'effet de transition que nous avons définie.

Résumé

Vue fournit une multitude de fonctions d'effets de transition pour obtenir des effets de changement de page dynamiques et fluides. En plus des fonctions de transition et de groupe de transition présentées ci-dessus, Vue fournit également davantage de fonctions d'effet de transition et de fonctions de transition dynamique pour mieux répondre aux différents besoins. Lors de l'utilisation de la fonction de transition, le style CSS de l'effet de transition doit être défini de manière appropriée pour obtenir l'effet souhaité.

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!