Vue3中如何实现过渡动画？组件和动画库方法解析-Vue.js-PHP中文网

Vue3中如何实现过渡动画？组件和动画库方法解析

青灯夜游

发布： 2022-02-15 19:21:39

转载

4187人浏览过

vue中如何实现过渡动画？下面本篇文章给大家介绍一下在vue3中实现过渡动画的两种方法（transition组件和动画库），希望对大家有所帮助！

Vue3中如何实现过渡动画？组件和动画库方法解析

在实际开发中，为了增加用户体验，经常会使用到过渡动画，而过渡动画在CSS中是通过transition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。

Vue的transition组件

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

使用animation条件渲染
使用transition条件展示
动态组件
组件根节点

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

立即学习“前端免费学习笔记（深入）”；

过渡demo

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

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

<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
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，他们的含义如下所示：

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

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

class的命名规则

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

使用animation

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

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

登录后复制

transition

/* 离开和进入过程中的样式 */
.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 v-else alt="Vue logo" src="./assets/logo.png" />
  </transition>
</template>

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

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

登录后复制

运行效果如下：

无限画

千库网旗下AI绘画创作平台

查看详情

我们可以看到，在一瞬间两个组件是同时存在的，有的时候我们不需要这种效果，那么我们需要设置animation组件的过渡模式，也就是css属性，它包含三个值：

<transition>：新元素与当前元素同时进行。
mode：新元素先进行进入过渡，完成之后当前元素过渡离开。
default：当前元素先进行离开过渡，完成之后新元素过渡进入。

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

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

登录后复制

现在的运行结果如下：

appear属性

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

<transition mode="out-in" appear>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

登录后复制

animate.css库的使用

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

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

安装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

animate.css组件还提供了属性来自定义过渡animate.css，具体如下：

<transition>
class
enter-from-class
enter-active-class
enter-to-class
leave-from-class

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

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

登录后复制