Vue中如何實現過渡動畫？以下這篇文章為大家介紹一下在Vue3中實現過渡動畫的兩種方法（transition元件和動畫庫），希望對大家有幫助！
在實際開發中，為了增加使用者體驗，經常會使用到過渡動畫，而過渡動畫在CSS中是透過transition 和animation實現的。而在Vue中，Vue本身內建了一些元件和API可以幫助我們方便的實現過渡動畫效果；接下來我們就學習一下。
Vue中提供了transition元件，該元件可以在下列情況之一的情況下，為元素自動加入進入/離開的過渡效果：
v-if條件渲染v-show條件展示使用方式也比較簡單，需要將需要動畫展示的元件或元素使用<transition></transition>元件包裹即可，然後定義一組class。 【相關推薦：vue.js影片教學】
如下程式碼展示了<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 '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，他們的意義如下所示：
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文件中的一張圖，完美解釋了整個流程
<transition>元件的class名稱並不是必須以v-作為前綴的，其實我們可以自訂前綴，只需要加入一個name屬性，例如<transition name="ywz">，那麼所有的前綴都變成了ywz-。
前面我們使用了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 'vue'
import HelloWorld from './components/HelloWorld.vue'
const show = ref(true)
</script>
<style>
/* 省略 */
</style>運行效果如下：
我們可以看到，在一瞬間兩個元件是同時存在的，有的時候我們不需要這種效果，那麼我們需要設定<transition>元件的過渡模式，也就是mode屬性，它包含三個值：
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>
现在的运行结果如下：
<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。
现在我们就来看那一下如何在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;
}<transition>组件还提供了属性来自定义过渡class，具体如下：
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-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组件，用于实现多个组件的过渡动画，我们以后介绍。
更多编程相关知识，请访问：编程视频！！
以上是Vue3中如何實現過渡動畫？元件和動畫庫方法解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
