Apprenez l'animation de transition personnalisée dans Vue 3 pour créer des effets de page sympas

À l’ère d’Internet d’aujourd’hui, la fraîcheur et la personnalisation des effets de page sont devenues l’un des facteurs importants qui attirent l’attention des utilisateurs. Dans le domaine du développement front-end, Vue 3, en tant que framework JavaScript populaire, offre d'excellentes performances et flexibilité, offrant aux développeurs une multitude d'outils et d'API pour obtenir des effets de page créatifs. Parmi eux, l'animation de transition personnalisée est une technologie très intéressante et intéressante. Cet article explique comment apprendre et appliquer une animation de transition personnalisée dans Vue 3 pour créer des effets de page sympas.

Tout d’abord, comprenons ce qu’est l’animation de transition dans Vue 3. L'animation de transition est un effet de transition implémenté dans les composants Vue, qui permet d'afficher les composants de manière animée lorsqu'ils sont insérés, mis à jour ou supprimés. Vue 3 fournit des composants de transition et des composants de groupe de transition pour implémenter cette fonction. Le composant de transition est utilisé pour effectuer la transition d'un seul élément, tandis que le composant de groupe de transition peut effectuer la transition de plusieurs éléments.

Afin de mieux apprendre et appliquer l'animation de transition personnalisée, nous devons d'abord maîtriser quelques concepts et techniques de base. Tout d’abord, nous devons comprendre les noms et événements des classes de transition dans Vue 3. Le nom de la classe de transition comprend quatre états : entrer (entrer), quitter (quitter), entrer dans la transition (entrer dans) et quitter la transition (quitter la). Dans l'état correspondant, nous pouvons obtenir des effets d'animation en ajoutant le nom de classe correspondant.

Deuxièmement, il est également très important de comprendre les événements de transition. Les événements de transition dans Vue 3 peuvent être divisés en deux catégories : les événements ordinaires et les événements CSS. Le premier comprend des événements tels que avant l'entrée, l'entrée, après l'entrée, avant le départ, le congé, après le congé, etc., et peut effectuer les opérations correspondantes à différentes étapes de transition. Ce dernier inclut des événements tels que enter-active et Leave-active, qui peuvent être utilisés pour ajouter ou supprimer des noms de classe au début et à la fin de l'animation, déclenchant ainsi des animations CSS. En combinant les noms de classes de transition et les événements de transition, nous pouvons obtenir une variété d'effets d'animation de transition personnalisés.

Ensuite, utilisons un exemple simple pour montrer comment utiliser Vue 3 pour implémenter une animation de transition personnalisée. Supposons que nous ayons un composant bouton Lorsque vous cliquez sur le bouton, le bouton sera affiché ou masqué avec un effet d'animation de fondu. Tout d'abord, nous devons ajouter le composant de transition au modèle du composant bouton et définir le nom de la classe de transition et l'événement de transition :

<template>
  <button @click="toggle" class="fade-button">
    {{ visible ? '隐藏' : '显示' }}
  </button>
  <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="visible" key="content" class="fade-content">
      欢迎来到炫酷的页面效果世界！
    </div>
  </transition>
</template>

En cas de clic du bouton, nous devons modifier la valeur d'une donnée réactive visible Pour basculer entre afficher ou masquer le bouton : visible的值来实现按钮显示或隐藏的切换：

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetWidth; // 强制重绘
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.opacity = 0;
      setTimeout(done, 1000); // 设置延时以等待动画结束
    }
  }
};
</script>

在上述代码中，我们通过el参数获取到要添加动画的元素，并通过改变其样式来实现动画效果。在enter和leave事件的结束时，我们还通过done函数来通知Vue动画已经完成，从而可以进行下一步的操作。

最后，我们还需要为这些动画添加相应的CSS样式。我们可以在样式表中定义.fade-enter、.fade-leave、.fade-enter-to和.fade-leave-to类名，并通过transition

.fade-enter,
.fade-leave {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter-to,
.fade-leave-to {
  opacity: 1;
}

Dans le code ci-dessus, nous obtenons l'élément à animer via le paramètre el, et obtenons l'effet d'animation en changeant son style . A la fin des événements enter et leave, nous utilisons également la fonction done pour notifier à Vue que l'animation est terminée, afin que le l'étape suivante peut être effectuée.

Enfin, nous devons également ajouter les styles CSS correspondants pour ces animations. On peut définir .fade-enter, .fade-leave, .fade-enter-to et .fade dans la feuille de style -leave-to nom de la classe et définissez l'effet de transition via l'attribut transition :

rrreee

Grâce aux étapes ci-dessus, nous avons implémenté avec succès une simple personnalisation du fondu d'entrée et du fondu- animation de transition d'effet. Lorsque l'utilisateur clique sur le bouton, la zone de contenu sera affichée ou masquée de manière dégradée, ce qui augmente l'interactivité et l'effet visuel de la page.

En développement réel, nous pouvons obtenir divers effets d'animation de transition personnalisés en ajustant le nom de la classe de transition et les événements de transition, et en ajoutant les styles CSS correspondants en fonction des besoins spécifiques. Par exemple, vous pouvez obtenir des effets de page plus vifs et plus riches en définissant des propriétés CSS telles que la rotation, la mise à l'échelle et la traduction. 🎜🎜Pour résumer, apprendre et appliquer une animation de transition personnalisée dans Vue 3 peut ajouter un élément très cool et personnalisé à notre page. En maîtrisant les noms de classes de transition et les événements de transition, et en utilisant de manière flexible les styles CSS, nous pouvons obtenir des effets de transition de page riches et diversifiés. En tant que développeur front-end, vous devez non seulement maîtriser l'utilisation de base de Vue 3, mais également apprendre et explorer en permanence divers effets de page innovants pour améliorer l'expérience utilisateur et l'attractivité des pages. Je souhaite que tout le monde gagne quelque chose en apprenant et en appliquant l'animation de transition personnalisée dans Vue 3, et en créant des effets de page plus sympas et personnalisés ! 🎜

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!