Composant de transition dans Vue3 : implémentation des effets de transition des composants

Composant de transition dans Vue3 : réaliser des effets de transition de composants

Vue3 est une toute nouvelle version lancée récemment, qui a apporté de nombreuses améliorations en termes de performances et d'expérience de développement. Dans le même temps, Vue3 fournit également plus de fonctionnalités et de fonctions, l'une des fonctions importantes étant le composant de transition. Dans Vue3, le composant de transition peut être utilisé pour implémenter l'effet de transition des composants, rendant ainsi l'interface utilisateur plus riche et plus vivante.

Quel est le volet transition ?

Dans Vue3, le composant de transition est un composant très utile, qui peut être utilisé pour ajouter des effets de transition aux composants. En termes simples, il y aura des effets d'animation lorsque des composants apparaîtront et disparaîtront. Cet effet d'animation peut être un fondu entrant et sortant, un zoom avant et arrière, etc., ce qui est très pratique.

Utilisez le composant de transition pour obtenir un effet de transition

Pour utiliser le composant de transition pour obtenir un effet de transition de composant, nous devons d'abord maîtriser certains points de connaissances de base. Le premier est l’utilisation de base du composant de transition. Ce qui suit est un exemple de code d'utilisation de base :

<template>
    <transition name="fade">
        <div v-if="show">我是一个div组件</div>
    </transition>
    
    <button @click="toggleShow">切换组件</button>
</template>

<script>
export default {
    data() {
        return {
            show: true
        };
    },
    
    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 définissons d'abord un composant de transition, puis définissons un composant div dans le composant de transition. Ce composant div ne sera affiché que lorsque show est vrai. Voici une explication du code :

• définit un attribut nommé "fade" sur la balise de transition. Cet attribut indique que lors du processus d'animation, le préfixe "fade-" sera ajouté au nom de la classe CSS. La description détaillée des noms de classes CSS sera abordée plus tard.
• Jugez la valeur de show en v-if. Si c'est vrai, il sera affiché, si c'est faux, il sera masqué.
• Dans le style, nous avons défini les classes nommées "fade-enter", "fade-leave-to", "fade-enter-active" et "fade-leave-active". Ces noms de classes sont composés du nom "fade" que nous avons défini dans l'attribut plus un préfixe.
• Lorsque le composant passe de caché à affiché, Vue ajoutera automatiquement le nom de classe "fade-enter" au composant. À ce stade, nous pouvons définir l'état initial du composant via CSS. De la même manière, lorsqu'un composant passe d'affiché à masqué, Vue ajoutera automatiquement le nom de classe "fade-leave-to" au composant. À ce stade, nous pouvons définir l'état final du composant via CSS.
• Définissez la propriété de transition CSS dans "fade-enter-active" et "fade-leave-active", qui représente la durée de l'animation. Ici, nous le réglons à 0,5 seconde.
• Grâce aux étapes ci-dessus, nous avons ajouté avec succès un effet de transition de fondu au composant div.

Nom de classe CSS du composant de transition

Dans le code ci-dessus, nous avons utilisé les noms de classe "fade-enter", "fade-leave-to", "fade-enter-active" et "fade-leave-active" ". Ces noms de classes sont intégrés au composant de transition, mais nous devons définir leur préfixe en fonction de l'attribut name de la transition. Lorsque Vue détecte l'entrée ou la sortie d'un élément, il ajoutera tour à tour les noms de classe suivants :

• [name]-enter : l'état de départ de l'entrée. Ce nom de classe est ajouté à l'élément dès qu'il est ajouté au DOM.
• [name]-enter-active : Entrée dans l'état de transition. Ce nom de classe sera ajouté à l'élément immédiatement après l'entrée dans l'état.
• [name]-enter-to : l'état final de l'entrée. Ce nom de classe sera ajouté à l'élément à la fin de l'état d'entrée.
• [nom]-leave : L'état de départ du départ. Ce nom de classe est ajouté à l'élément dès qu'il quitte le DOM.
• [name]-leave-active : quitter l'état de transition. Ce nom de classe sera ajouté à l'élément immédiatement après la fin de l'état de sortie.
• [nom]-leave-to : l'état final du départ. Ce nom de classe sera ajouté à l'élément à la fin de l'état de congé.

Nous pouvons définir les états initial, intermédiaire et final de l'effet de transition pour le composant en fonction de ces noms de classe.

Résumé

Dans Vue3, le composant de transition est le composant de base utilisé pour obtenir des effets de transition de composants. Il nous permet d'ajouter des effets visuels riches aux composants, améliorant ainsi l'expérience interactive de l'utilisateur. Lors de l'utilisation du composant de transition, nous devons d'abord maîtriser les méthodes d'utilisation de base et les noms de classes CSS associés, afin de pouvoir en tirer parti dans des projets réels.

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!