Fonction de transition dans Vue3 : implémenter une transition animée des composants

La fonction de transition dans Vue3 : Implémentation de transitions animées de composants

Vue3 est l'un des frameworks JavaScript les plus populaires actuellement, et il fournit des outils complets pour résoudre les problèmes de construction d'applications frontales. Parmi elles, la fonction de transition est l'une des fonctions les plus puissantes et les plus utiles, qui peut nous aider à réaliser la transition animée des composants. Dans cet article, nous présenterons en détail la fonction de transition et expliquerons comment l'utiliser dans les applications Vue3.

Le rôle de la fonction de transition

Dans Vue2, nous utilisons généralement le composant Mais dans Vue3, nous pouvons utiliser la fonction de transition pour remplacer le composant Le rôle de la fonction de transition est de fournir un effet de transition animé pour le composant.

La fonction de transition a les paramètres importants suivants :

• name : Le nom utilisé pour définir l'effet de transition.
• apparaître : Indique si un effet de transition doit apparaître lorsque le composant est rendu pour la première fois.
• mode : Représente le mode d'animation de transition. Vous avez le choix entre trois modes : entrée-sortie, sortie-entrée et sortie par défaut.
• onBeforeEnter, onEnter, onAfterEnter, onBeforeLeave, onLeave, onAfterLeave : Représente la fonction de rappel déclenchée lorsque le composant entre ou sort de l'état de transition.

Étapes pour utiliser la fonction de transition

Voyons comment utiliser la fonction de transition dans une application Vue3 :

Première étape : définissez la fonction de transition dans le modèle du composant Vue.

<template>
  <div>
    <transition name="fade" @enter="enter" @after-enter="afterEnter">
      // your component here
    </transition>
  </div>
</template>

Dans cet exemple, nous avons mis en place une fonction de transition nommée "fade" et utilisé les écouteurs d'événements @enter et @after-enter pour déclencher les fonctions enter et afterEnter. Les fonctions enter et afterEnter seront déclenchées lorsque le composant entre dans l'animation et après la fin de l'animation.

Étape 2 : Définissez la fonction de rappel de la fonction de transition dans le composant Vue.

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    enter(el, done) {
      // el 表示要执行动画的元素。
      // done 是一个在动画过渡结束时调用的函数。
      // 动画执行完毕后必须调用 done 函数，否则动画可能会被卡死。
      el.style.opacity = 0;
      setTimeout(() => {
        el.style.transitionDuration = '0.5s';
        el.style.opacity = 1;
      });
      setTimeout(done, 1000);
    },
    afterEnter(el) {
      // 动画完成后调用的函数，可以在这里做一些清理工作。
      el.style.removeProperty('opacity');
    },
  },
});
</script>

Dans cet exemple, nous définissons les fonctions enter et afterEnter. La fonction enter est utilisée pour définir l'état initial de l'élément et effectuer l'effet de transition d'animation de l'élément. La fonction afterEnter est utilisée pour nettoyer après la fin de la transition d'animation.

Résumé

Dans cet article, nous présentons en détail la fonction de transition dans Vue3. Nous voyons qu'en utilisant la fonction de transition, nous pouvons facilement obtenir l'effet de transition animé du composant. Dans le même temps, nous avons également appris que la fonction de transition possède de nombreux paramètres et fonctions de rappel, qui peuvent être définis en fonction de nos propres besoins. J'espère que grâce à l'introduction de cet article, les lecteurs pourront mieux comprendre la fonction de transition dans Vue3 et l'utiliser de manière flexible dans le développement d'applications Vue3.

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!