Explication détaillée des fonctions d'animation dans Vue3 : obtenir des effets d'animation sympas

À mesure que Vue.js est utilisé de plus en plus largement, de plus en plus de développeurs commencent à utiliser Vue.js pour obtenir des effets interactifs complexes. Dans Vue.js 3.0, la fonction d'animation a été considérablement améliorée, nous apportant des effets d'animation plus riches. Dans cet article, je vais vous présenter en détail les fonctions d'animation de Vue.js 3.0 et comment utiliser ces fonctions pour obtenir des effets d'animation sympas.

Fonctions d'animation dans Vue.js 3.0

Dans Vue.js 3.0, nous pouvons utiliser les fonctions d'animation suivantes :

• transition : déclencher une animation lorsqu'un élément est inséré ou supprimé.
• v-enter : Déclenche une animation lorsqu'un élément est inséré.
• v-enter-active : Déclenche l'animation lorsque l'élément est inséré et dure un certain temps.
• v-enter-to : Déclenche l'état final de l'animation lorsque l'élément est inséré.
• v-leave : Déclenchez une animation lorsque l'élément est supprimé.
• v-leave-active : Déclenche l'animation lorsque l'élément est supprimé et dure un certain temps.
• v-leave-to : Déclenche l'état final de l'animation lorsque l'élément est supprimé.

Les fonctions d'animation ci-dessus peuvent être utilisées sur des balises de transition ou des éléments individuels pour obtenir différents effets d'animation en définissant différentes classes de style.

Comment utiliser les fonctions d'animation pour obtenir des effets d'animation sympas

Tout d'abord, nous devons définir l'effet de transition d'animation dans le composant Vue.js, qui peut être obtenu via le code suivant :

<template>
  <transition name="fade">
    <p v-if="show">这是一个动画示例</p>
  </transition>
</template>

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

Dans le code ci-dessus, nous passons transition< La balise /code> et l'espace de noms <code>.fade définissent un effet d'animation nommé fade. Lorsque show est vrai, l'élément est inséré dans le document et affiché dans la classe .fade-enter-active et dans le .fade-enter. classe Affiché sous l'action ; lorsque show est faux, l'élément sera supprimé du document et placé dans la classe .fade-leave-active et .fade. -leave< /code> disparaît progressivement sous l'influence de la classe. <code>transition标签和.fade命名空间来定义了一个名为fade的动画效果。当show为真时，元素会插入到文档中，并在.fade-enter-active类和.fade-enter类的作用下显示出来；当show为假时，元素会被移除文档，并在.fade-leave-active类和.fade-leave类的作用下逐渐消失。

例如，我们可以在组件中添加一个按钮来切换show变量的值，从而实现该元素的插入和移除动画。

<template>
  <div>
    <button @click="show = !show">{{ show ? '隐藏' : '显示' }}</button>
    <transition name="fade">
      <p v-if="show">这是一个动画示例</p>
    </transition>
  </div>
</template>

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

在上述代码中，我们定义了一个按钮，并绑定了一个点击事件来切换show的值。当show为真时，该元素会出现，并伴随着淡入的动画效果；当show为假时，该元素会逐渐消失，并伴随着淡出的动画效果。

除了淡入淡出效果，我们还可以使用其他的动画效果，比如动态的缩放、旋转、移动等效果，只需要设定不同的CSS样式类即可。以下是一个实现旋转效果的示例代码：

<template>
  <div>
    <button @click="show = !show">{{ show ? '隐藏' : '显示' }}</button>
    <transition name="rotate">
      <p v-if="show">这是一个动画示例</p>
    </transition>
  </div>
</template>

<style>
.rotate-enter-active {
  animation: rotate .5s ease-in-out;
}
.rotate-enter, .rotate-leave-to {
  opacity: 0;
  transform: rotate(0deg);
}
.rotate-leave-active {
  animation: rotate .5s ease-in-out reverse;
}
.rotate-enter-to, .rotate-leave {
  opacity: 1;
  transform: rotate(360deg);
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

在上述代码中，我们定义了一个名为rotate的动画效果，并使用CSS3的animation

Par exemple, nous pouvons ajouter un bouton au composant pour changer la valeur de la variable show afin d'animer l'insertion et la suppression de l'élément.

rrreee

Dans le code ci-dessus, nous définissons un bouton et lions un événement de clic pour basculer la valeur de show. Lorsque show est vrai, l'élément apparaîtra, accompagné de l'effet d'animation de fondu entrant ; lorsque show est faux, l'élément disparaîtra progressivement, accompagné d'un fondu sortant. effet d'animation.

En plus de l'effet de fondu d'entrée et de sortie, nous pouvons également utiliser d'autres effets d'animation, tels que la mise à l'échelle dynamique, la rotation, le mouvement et d'autres effets. Il nous suffit de définir différentes classes de style CSS. Voici un exemple de code pour obtenir un effet de rotation : 🎜rrreee🎜Dans le code ci-dessus, nous définissons un effet d'animation nommé rotate et utilisons l'attribut animation de CSS3 pour obtenir l'effet de rotation des éléments. Lorsqu'un élément est inséré, il s'accompagne d'un effet de rotation ; lorsqu'un élément est retiré, il pivote vers l'avant puis s'inverse avant de sortir. 🎜🎜Résumé🎜🎜La fonction d'animation de Vue.js 3.0 offre un moyen très pratique d'obtenir divers effets d'animation, notamment des fondus entrants et sortants, la mise à l'échelle, la rotation, le mouvement et d'autres effets. Les développeurs peuvent configurer les classes de style correspondantes en fonction des effets réels. Besoins pour obtenir différents effets d'animation. En utilisant des fonctions d'animation, nous pouvons obtenir des effets interactifs plus magnifiques et améliorer l'expérience utilisateur. 🎜

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!