这篇“Vue中如何实现过渡动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中如何实现过渡动画效果”文章吧。
Vue的transition动画
Transition动画的使用
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：
React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group；
Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；
我们来看一个案例：
Hello World的显示和隐藏；
通过下面的代码实现，显式和隐藏Hello World是不会有任何动画效果的；
<template>
<div class="app">
<button @click="btnClick">Toogle</button>
<h3 v-show="isShow">Hello World</h3>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isShow = ref(true)
const btnClick = () => {
isShow.value = !isShow.value
}
</script>没有动画的情况下，整个内容的显示和隐藏会非常的生硬：
如果我们希望给单元素或者组件实现过渡动画，可以使用Vue提供的 transition 内置组件来完成动画；
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
条件渲染 (使用 v-if)条件展示 (使用 v-show)
动态组件
组件根节点
例如我们给刚刚的Hello World添加动画, 首先定义类(类的名字暂时是固定的)
/* 从什么状态进入 */
.v-enter-from {
opacity: 0;
}
/* 进入之后打算变成的状态 */
.v-enter-to {
opacity: 1;
}
/* 进入的过程中做什么 */
.v-enter-active {
transition: opacity 2s linear;
}定义好类之后, 我们可以使用Vue的内置组件 transition 将动画元素包裹起来, transition 组件会自动在合适的时机, 将合适的类添加到它所包裹的元素上
<template> <div class="app"> <button @click="btnClick">Toogle</button> <!-- 使用内置组件包裹h3 --> <transition> <h3 v-show="isShow">Hello World</h3> </transition> </div> </template>
此时显式Hello World 就已经有动画效果了, 但是隐藏时并没有效果, 是因为我们刚刚定义的类是进入的类, 当离开时我们也应该定义对应的类
/* 离开后的状态 */
.v-leave-to,
/* 从什么状态进入 */
.v-enter-from {
opacity: 0;
}
/* 开始离开的状态 */
.v-leave-from,
/* 进入之后打算变成的状态 */
.v-enter-to {
opacity: 1;
}
/* 离开过程中做什么 */
.v-leave-active,
/* 进入的过程中做什么 */
.v-enter-active {
transition: opacity 1s linear;
}Transition组件的原理
我们会发现，上面演示代码中Vue自动给h3元素添加了动画，这是什么原因呢？
当插入或删除包含在 transition 组件中的元素时， Vue 将会做以下处理：
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
2.如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画， DOM插入、删除操作将会立即执行；
在上面我们简单使用了Vue会自动添加/删除的CSS类名, 接下来我们详细学习一下都有哪些类吧Vue中如何实现过渡动画效果
