Comment utiliser la fonction de crochet de transition pour obtenir un effet de transition d'animation dans Vue

Ces dernières années, la technologie front-end s'est développée de plus en plus vite et le framework Vue est devenu l'un des frameworks front-end les plus populaires dans le développement Web. Le framework Vue fournit des effets d'animation puissants et flexibles, ce qui rend notre interface Web plus vivante et attrayante, améliorant ainsi l'expérience utilisateur. L'utilisation de la fonction de crochet de transition dans Vue pour obtenir des effets de transition d'animation est l'un des moyens courants.

1. Qu'est-ce qu'une fonction de hook de transition ?

Le traitement de la transition dans Vue n'est pas réalisé via une transition CSS, mais grâce à la combinaison de noms de classes dynamiques et de fonctions de hook JS. Vue fournit 6 fonctions de hook, à savoir "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave" et "leave".

2. Comment utiliser la fonction hook de transition

Lorsqu'un élément entre ou quitte le DOM, l'état de transition sera déclenché. À ce moment, nous pouvons utiliser la fonction hook correspondante pour définir l'effet de transition. Nous pouvons obtenir cet effet grâce à la balise "transition" dans le composant Vue.

Par exemple, nous pouvons utiliser la balise "transition" dans un composant personnalisé pour implémenter un simple effet de fondu :

<template>
  <div v-show="show" class="fade">
    <p>{{text}}</p>
    <button @click="show = false">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      text: '这是一个淡出效果'
    }
  }
}
</script>

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

Dans l'exemple ci-dessus, nous avons défini une classe nommée "fade" et défini les états de transition lors de l'entrée et partant respectivement. Utilisez ensuite la directive "v-show" dans le composant Vue pour déclencher l'affichage et le masquage du composant.

Lorsque l'affichage et le masquage d'un composant sont déclenchés, Vue ajoutera automatiquement le nom de classe correspondant pour obtenir l'effet de fondu. A ce stade, il suffit de définir l'état de transition correspondant dans la balise "style".

3. Paramètres de la fonction hook de transition

Les paramètres de la fonction hook en comprennent quatre. Dans les fonctions "avant d'entrer" et "avant de quitter", il n'y a qu'un seul paramètre, qui représente l'élément DOM concerné. à insérer ou à supprimer ; les autres Les quatre fonctions hook ont ​​chacune deux paramètres :

• el : représente l'élément DOM inséré ;
• done : représente la fonction de rappel une fois la transition terminée, qui peut être utilisée pour effectuer certaines tâches spécifiques. opérations une fois l'animation terminée ;

Ensuite, nous donnons un exemple complet pour démontrer l'utilisation spécifique de la fonction de hook de transition.

<template>
  <div>
    <button @click="show = !show">{{ show ? 'Hide' : 'Show' }}</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <div v-show="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0;  // 设置元素开始状态
    },
    enter: function(el, done) {
      Vue.nextTick(() => {
        el.style.transition = 'opacity .5s';
        el.style.opacity = 1;    // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterEnter: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    enterCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
    beforeLeave: function(el) {
      el.style.opacity = 1;  // 设置元素开始状态
    },
    leave: function(el, done) {
      Vue.nextTick(() => {          
        el.style.transition = 'opacity .5s';
        el.style.opacity = 0;  // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterLeave: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    leaveCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

Dans l'exemple ci-dessus, nous avons défini huit fonctions de hook de transition, qui correspondent à différents états lorsque le composant entre et sort. Les effets de transition spécifiques de l'entrée et de la sortie sont contrôlés par la fonction hook.

Lors de la saisie du composant, la fonction hook "before-enter" définit l'état de départ de l'élément, tandis que la fonction hook "enter" définit la transition de l'élément, puis lie la fonction de rappel "done" via le "transitionend " événement pour terminer la transition.

De même, lors de la sortie d'un composant, la fonction "avant-leave" définit d'abord l'état de départ de l'élément, puis la fonction hook "leave" définit l'état de transition de sortie et lie la fonction de rappel "done" via le " transitionend" pour terminer la transition de départ.

4. Résumé

Dans Vue, vous pouvez utiliser la balise "transition" pour obtenir différents effets de transition et définir différents états de transition via six fonctions de hook. L’utilisation des fonctions de hook de transition est l’un des points clés à maîtriser. La mise en œuvre d'effets de transition via des fonctions de hook nous permet de contrôler de manière plus flexible l'état de transition des composants, améliorant ainsi l'expérience utilisateur des applications Web et obtenant des effets plus vifs et attrayants.

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!