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;
}

rrreee

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!