Comment utiliser les noms de classes de transition pour obtenir des effets de transition d'animation dans Vue

Vue est un framework JavaScript populaire conçu pour simplifier le développement d'applications Web. Parmi eux, le nom de la classe de transition est une fonctionnalité très importante, qui nous permet d'obtenir des effets d'animation de transition lors de l'ajout, de la suppression et d'autres comportements d'éléments DOM. Dans cet article, nous apprendrons comment utiliser les noms de classes de transition dans Vue pour apporter une expérience d'animation plus riche à nos applications Web.

Quel est le nom de la classe de transition Vue ?

Le nom de classe de transition dans Vue est un ensemble de noms de classes CSS définis dans la bibliothèque Vue. Ces noms de classe fournissent des effets d'animation de transition CSS prédéfinis, tels que fondu entrant, fondu sortant, zoom avant, zoom arrière, etc. Dans le nom de la classe de transition de Vue, nous pouvons utiliser les mots-clés suivants :

• v-enter : l'état initial avant l'insertion de l'élément DOM.
• v-enter-active : Le processus d'exécution de l'animation après l'insertion de l'élément DOM.
• v-enter-to : L'état de terminaison après l'insertion de l'élément DOM.
• v-leave : L'état initial de l'élément DOM avant sa suppression.
• v-leave-active : Le processus d'exécution de l'animation après la suppression de l'élément DOM.
• v-leave-to : L'état de terminaison après la suppression de l'élément DOM.

Ces noms de classes facilitent l'ajout et la suppression d'effets d'animation aux éléments DOM, en particulier dans les listes et le rendu conditionnel de Vue.

Comment utiliser les noms de classe de transition Vue

Dans Vue, nous pouvons facilement ajouter des noms de classe de transition aux éléments via la directive v-bind et la directive v-on. Ci-dessous, nous expliquerons comment utiliser ces deux instructions dans Vue.

Utilisez la directive v-bind pour ajouter un nom de classe de transition

En utilisant la directive v-bind, nous pouvons lier un objet à un élément et ajouter un nom de classe de transition via l'objet. Pour obtenir l'effet de transition, nous devons ajouter un attribut clé sur l'élément, qui doit être unique afin que Vue puisse suivre l'état de l'élément. Par exemple, le code suivant :

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="message">Hello World!</p>
    </transition>
    <button v-on:click="toggleShow">Toggle</button>
  </div>
</template>

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

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

Dans le code ci-dessus, nous utilisons le composant de transition de Vue pour activer l'effet de transition. Dans le composant de transition, nous définissons une transition nommée "fade" afin de pouvoir utiliser .fade-enter, .fade-enter-active, .fade-enter-to, .fade-leave, .fade en CSS -leave-active , .fade-leave-to ces noms de classe. Nous utilisons la directive v-if sur l'élément p pour contrôler s'il apparaît, et utilisons l'attribut key pour suivre son statut. En CSS, nous définissons deux noms de classe fade-enter-active et fade-leave-active, qui sont utilisés pour définir le temps d'exécution de l'animation de transition. Les fonctions de fade-enter et fade-leave-to consistent à spécifier les états de début et de fin des éléments lors de l'insertion et de la suppression respectivement.

Utilisez la directive v-on pour ajouter des noms de classes de transition

En utilisant la directive v-on, nous pouvons ajouter des noms de classes de transition aux éléments via l'écoute d'événements. Par exemple, le code suivant :

<template>
  <div>
    <transition name="scale">
      <button v-if="visible" v-on:click="hide">Hide</button>
    </transition>
    <button v-else v-on:click="show">Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
}
</script>

<style>
.scale-enter-active, .scale-leave-active {
  transition: transform .5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}
</style>

Dans le code ci-dessus, nous utilisons la directive v-on pour lier l'événement click pour afficher ou masquer le bouton. Lorsque le bouton est affiché, nous utilisons le composant de transition de Vue pour y ajouter un effet de transition nommé « scale ». En CSS, nous définissons deux noms de classe : .scale-enter-active et .scale-leave-active, qui sont utilisés pour contrôler le temps d'exécution de l'animation de transition. Nous définissons également deux noms de classe : .scale-enter et .scale-leave-to, qui sont utilisés pour spécifier les états de début et de fin des éléments lorsqu'ils sont insérés et supprimés.

Résumé

Le nom de la classe de transition de Vue fournit un moyen simple et puissant d'obtenir des effets d'animation de transition des éléments DOM. Nous pouvons utiliser les directives v-bind et v-on pour lier ces noms de classe aux éléments et contrôler les effets de transition des éléments via CSS. Si vous n'êtes pas familier avec les noms de classe de transition et les effets d'animation de Vue, il est recommandé de faire plus d'exercices et d'expériences afin de mieux maîtriser les noms de classe de transition de 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!