Comment utiliser le composant de transition pour obtenir des effets de transition animés dans Vue

Vue est un framework JavaScript populaire qui contient de nombreux composants utiles pour aider les développeurs à créer plus efficacement des applications frontales. Parmi eux, le composant de transition propre à Vue peut être utilisé pour obtenir des effets de transition animés, ce qui peut rendre l'interaction avec les applications plus fluide et plus vivante. Ensuite, cet article expliquera comment utiliser le composant de transition dans Vue pour obtenir des effets de transition animés.

1. Connaissances de base

Avant d'utiliser le composant de transition de Vue, vous devez comprendre certaines connaissances de base dans Vue. Les plus importantes d'entre elles sont les fonctions hook, qui sont des fonctions du cycle de vie des composants Vue qui sont déclenchées lors du rendu et de la mise à jour des composants. Le composant de transition peut utiliser ces fonctions de hook pour obtenir des effets de transition.

Une autre chose à savoir est le nom de la classe de transition CSS dans Vue. Vue fournit plusieurs noms de classes CSS grâce auxquels les effets de transition d'animation peuvent être définis. Ses noms incluent : v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active et v-leave-to. Ces noms de classe correspondent aux états de transition d'entrée et de sortie, et les styles pertinents peuvent être définis en CSS pour obtenir des effets d'animation.

2. Utilisation de base

La syntaxe de base de l'utilisation du composant de transition est très simple. Tout d'abord, ajoutez la balise de transition au modèle, puis encapsulez les éléments à transitionner, puis ajoutez ou supprimez des éléments si nécessaire via les instructions v-if ou v-show intégrées de Vue.

Par exemple, dans le code suivant, nous enveloppons un élément div dans une balise de transition et utilisons la directive v-if pour contrôler l'élément :

<template>
  <div>
    <transition>
      <div v-if="show">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous lions une méthode toggle au bouton , lorsque le est cliqué sur le bouton, la valeur de show sera inversée, donc l'élément apparaîtra ou disparaîtra en fonction de la valeur de show.

3. Utilisation de la fonction hook

Bien que l'exemple ci-dessus démontre une utilisation de base, il n'obtient aucun effet d'animation. Afin d'obtenir l'effet de transition, vous devez utiliser certaines fonctions de hook fournies par Vue pour contrôler les différents états de la transition.

Ces fonctions de crochet incluent : avant-entrée, entrée, après-entrée, entrée-annulée, avant-sortie, sortie, après-sortie et sortie-annulée. Ces fonctions de hook seront déclenchées à différents moments lorsque les éléments entrent ou sortent. Nous pouvons définir le nom de la classe de transition CSS correspondante dans ces fonctions de hook pour déclencher l'effet de transition d'animation.

Ce qui suit est un effet de transition simple basé sur des fonctions de hook :

<template>
  <div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled">
      <div :key="isShown">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShown: true
    }
  },
  methods: {
    toggle() {
      this.isShown = !this.isShown
    },
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 500 })
      done()
    },
    afterEnter(el) {
      el.style.opacity = ''
    },
    enterCancelled(el) {
      el.style.opacity = ''
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 500 })
      done()
    },
    afterLeave(el) {
      el.style.opacity = ''
    },
    leaveCancelled(el) {
      el.style.opacity = ''
    }
  }
}
</script>

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

Dans le code ci-dessus, nous avons lié une série de fonctions de hook et introduit la bibliothèque Velocity.js pour compléter l'effet d'animation. Nous traitons les éléments différemment dans ces fonctions de hook et obtenons des effets de transition complexes en définissant différentes classes CSS.

De plus, nous devons ajouter des styles CSS à la feuille de style pour définir différents effets d'animation de transition. Dans le code ci-dessus, l'effet d'animation du dégradé de transparence est obtenu en définissant la propriété opacity.

4. Conclusion

Cet article présente l'utilisation de base du composant de transition dans Vue et l'utilisation des fonctions de hook. Nous pouvons utiliser ces méthodes pour obtenir des effets d'animation complexes et rendre l'interaction de l'application plus vive et plus fluide. Il convient de noter que l'expérience utilisateur et les performances de la page doivent être prises en compte pour les effets de transition, et que le temps de transition ne doit pas être trop long pour éviter d'affecter la vitesse de chargement des pages.

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!