Comment implémenter une animation de transition dans Vue3 ? Analyse de la méthode de la bibliothèque de composants et d'animations

Comment implémenter une animation de transition dans

Vue ? L'article suivant vous présentera deux méthodes d'implémentation de l'animation de transition dans Vue3 (composant de transition et bibliothèque d'animation). J'espère qu'il vous sera utile !

Dans le développement réel, afin d'augmenter l'expérience utilisateur, l'animation de transition est souvent utilisée, et l'animation de transition en CSS se fait via transitiontransition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。

Vue的transition组件

Vue中中提供了transition组件，该组件可以在下列情况之一的情况下，为元素自动添加进入/离开的过渡效果：

• 使用v-if条件渲染
• 使用v-show条件展示
• 动态组件
• 组件根节点

使用方式也比较简单，需要将需要动画展示的组件或者元素使用<transition></transition>组件包裹即可，然后定义一组class。【相关推荐：vue.js视频教程】

过渡demo

如下代码展示了<transition></transition>组件的基本用法：

<template>
  <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow">
    显示与隐藏
  </button>
  <br />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
  <transition>
    <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const helloWorldShow = ref(true)
</script>

<style>
#app {
  /* more css */
}
/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

代码的运行结果如下图所示：

上面使用的一些class，他们的含义如下所示：

• v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
• v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)，在过渡/动画完成之后移除。

下图是Vue文档中的一张图，完美解释了整个流程

class的命名规则

<transition>组件的class名称并不是必须以v-作为前缀的，其实我们可以自定义前缀，只需要添加一个name属性，例如<transition name="ywz">，那么所有的前缀全部变成了ywz-。

使用animation

前面我们使用了transition属性实现了组件进入和离开的过渡效果，现在我们可以使用animation属性实现，示例代码如下：

<transition>
  <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
</transition>

css

/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}

代码运行结果如下：

过渡模式

先看一个问题，当动画在两个元素之间切换的时候，会出现一个问题，复现这个问题的代码如下：

<template>
  <button class="btn btn-primary" @click="show = !show">显示与隐藏</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const show = ref(true)
</script>

<style>
/* 省略 */
</style>

运行效果如下：

我们可以看到，在一瞬间两个组件是同时存在的，有的时候我们不需要这种效果，那么我们需要设置<transition>组件的过渡模式，也就是mode et animation

implémenté. Dans Vue, Vue lui-même possède des composants et des API intégrés qui peuvent nous aider à réaliser facilement des effets d'animation de transition. Découvrons-les ensuite. 🎜

Le composant de transition de Vue

🎜Vue fournit le composant transition, qui peut être utilisé dans les situations suivantes : dans un cas, ajoutez automatiquement des effets de transition d'entrée/sortie pour les éléments : 🎜

• Utilisez le rendu conditionnel v-if
• Utilisez v-showAffichage conditionnel
• Composant dynamique
• Nœud racine du composant

🎜L'utilisation est également relativement simple, vous devez ajouter le composant ou l'élément qui doit être animé Utilisez simplement le composant <transition> pour l'envelopper, puis définissez un ensemble de class. [Recommandations associées : 🎜Tutoriel vidéo vue.js🎜]🎜

Démo de transition

🎜Le code suivant montre <transition> Utilisation de base du composant : 🎜

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
</transition>

🎜Le résultat de l'exécution du code est le suivant : 🎜🎜🎜🎜Certaines classes utilisées ci-dessus, leurs significations sont les suivantes : 🎜

• v-enter-from : Définit l'état de départ de la transition d'entrée. Il prend effet avant l'insertion de l'élément et est supprimé à l'image suivante après l'insertion de l'élément.
• v-enter-active : Définit l'état dans lequel la transition d'entrée prend effet. S'applique tout au long de la transition, prend effet avant l'insertion de l'élément et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour la saisie des transitions.
• v-enter-to : définit l'état final de la transition d'entrée. Prend effet à l'image suivante après l'insertion de l'élément (en même temps, v-enter-from est supprimé), et est supprimé une fois la transition/animation terminée.
• v-leave-from : définit l'état de départ de la transition de sortie. Il prend effet immédiatement lorsque la transition de sortie est déclenchée et est supprimé à l'image suivante.
• v-leave-active : définit l'état dans lequel la transition de congé prend effet. S'applique tout au long de la transition de sortie, prend effet immédiatement lorsque la transition de sortie est déclenchée et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour les transitions de sortie.
• v-leave-to : l'état final de la transition de congé. Prend effet sur l'image suivante après le déclenchement de la transition de sortie (en même temps v-leave-from est supprimé), et est supprimé une fois la transition/animation terminée.

🎜L'image ci-dessous est une image de la documentation Vue, qui explique parfaitement l'ensemble du processus🎜🎜🎜

Règles de dénomination des classes

🎜<transition>Le nom class du composant n'a pas besoin d'être préfixé par v-. En fait, nous pouvons personnaliser le préfixe. , ajoutez simplement un attribut name, tel que <transition name="ywz">, puis tous les préfixes deviennent ywz-. 🎜

Utiliser l'animation

🎜 Plus tôt, nous avons utilisé l'attribut transition pour obtenir l'effet de transition du composant entrant et en partant. Nous pouvons maintenant utiliser l'attribut animation pour y parvenir. L'exemple de code est le suivant : 🎜

<transition mode="out-in" appear>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

🎜css🎜

npm i animate.css

🎜Le résultat de l'exécution du code est le suivant : 🎜 🎜🎜

Mode de transition

🎜Regardons d'abord un problème Lorsque l'animation bascule entre deux éléments, un problème se produira. Le code pour reproduire ce problème est. comme suit : 🎜

// main.jsimport 'animate.css'

🎜L'effet de course est le suivant : 🎜 🎜🎜🎜Nous pouvons Comme vous pouvez le voir, deux composants existent en même temps. Parfois, nous n'avons pas besoin de cet effet, nous devons alors définir le mode de transition du Composant <transition>, qui est l'attribut mode , qui contient trois valeurs : 🎜

• default：新元素与当前元素同时进行。
• in-out：新元素先进行进入过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行离开过渡，完成之后新元素过渡进入。

了解这个属性之后，我们将代码修改一下，修改后如下：

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
</transition>

现在的运行结果如下：

appear属性

<transition>组件的appear属性用于开启手册渲染的动画，它接受一个布尔值，示例代码如下：

<transition mode="out-in" appear>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

animate.css库的使用

如果我们在实际的开发中自己去一个一个的编写这些动画序列，那么效率是比较低下的，所以我们经常会用到一些动画库，最常见的就是animate.css。

现在我们就来看那一下如何在Vue中使用animate.css：

• 安装animate.css

npm i animate.css

• 引入animate.css

// main.jsimport 'animate.css'

使用动画序列

.v-enter-active {
  animation: fadeInDown 0.5s;
}
.v-leave-active {
  animation: fadeOutDown 0.5s;
}

使用自定义过渡class

<transition>组件还提供了属性来自定义过渡class，具体如下：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

他们的优先级会高于普通的类名。

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

写在最后

本篇文章介绍了过渡的基本使用，掌握Vue提供的<transition></transition>组件配合animate.css可以轻松实现过渡动画。

除了单个组件的过渡外，Vue还提供了TransitionGroup组件，用于实现多个组件的过渡动画，我们以后介绍。

更多编程相关知识，请访问：编程视频！！

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!