Vue過度與動畫的使用及說明
更新時間：2026年01月15日 09:03:51 作者：咖啡の貓
本文詳細介紹了Vue.js的過渡與動畫機制,從基礎語法到實戰(zhàn)應用,涵蓋CSS類名、JavaScript鉤子、列表過渡、狀態(tài)過渡等高級技巧,并提供了性能優(yōu)化建議,通過系統(tǒng)學習,讀者可以掌握如何實現(xiàn)流暢的頁面過渡與細膩的動畫效果,提升用戶體驗
一、前言
在現(xiàn)代前端開發(fā)中，用戶體驗 已成為衡量項目質量的重要標準。而流暢的頁面過渡與細膩的動畫效果，正是提升用戶感知的關鍵一環(huán)。
Vue.js 為我們提供了強大且簡潔的內置能力 —— transition 組件，讓我們可以輕松實現(xiàn)元素的進入、離開、列表排序等動畫效果，無需依賴第三方庫（如 jQuery 或 Anime.js）。
本文將帶你系統(tǒng)掌握 Vue 的過渡與動畫機制，從基礎語法到實戰(zhàn)應用，一步步打造專業(yè)級交互體驗。
你將學到：
- Vue
transition組件的基本用法 - 如何結合 CSS 類名實現(xiàn)動畫
- 使用 JavaScript 鉤子控制復雜動畫
- 列表過渡與狀態(tài)過渡的高級技巧
- 常見問題與性能優(yōu)化建議
二、Vue 過渡 vs 動畫：概念解析
雖然我們常把“過渡”和“動畫”混用，但在 Vue 中，它們有明確的區(qū)分：
| 概念 | 說明 |
|---|---|
| 過渡（Transition） | 指元素在插入、更新、移除時的中間狀態(tài)變化，通常由 CSS transition 實現(xiàn) |
| 動畫（Animation） | 使用 CSS @keyframes 定義關鍵幀，控制更復雜的視覺效果 |
核心思想：Vue 通過監(jiān)聽元素的生命周期，在特定時機自動添加/移除 CSS 類名，從而觸發(fā)動畫。
三、基礎語法：使用<transition>組件
Vue 提供了內置的 <transition> 組件，用于包裹需要動畫的元素。
1. 基本結構
<template>
<div>
<button @click="show = !show">切換顯示</button>
<transition name="fade">
<p v-if="show">這是一段淡入淡出的文字</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>2. CSS 類名解析
當 <transition> 包裹的元素發(fā)生狀態(tài)變化時，Vue 會自動添加以下類名：
| 類名 | 觸發(fā)時機 | 說明 |
|---|---|---|
| fade-enter-from | 進入前 | 初始狀態(tài) |
| fade-enter-active | 進入過程中 | 可定義 transition |
| fade-enter-to | 進入后 | 動畫結束狀態(tài)（通?？墒÷裕?/td> |
| fade-leave-from | 離開前 | 初始狀態(tài) |
| fade-leave-active | 離開過程中 | 可定義 transition |
| fade-leave-to | 離開后 | 動畫結束狀態(tài) |
name="fade" 決定了類名前綴。若不設置，默認為 v-。
3. 完整 CSS 動畫定義
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}效果：文字在顯示/隱藏時，會以 0.5 秒的緩動效果淡入淡出。
四、實戰(zhàn)案例
案例 1：滑入滑出動畫（結合 transform）
.slide-enter-active {
transition: all 0.3s ease-out;
}
.slide-leave-active {
transition: all 0.3s ease-in;
}
.slide-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-leave-to {
transform: translateX(100%);
opacity: 0;
}<transition name="slide"> <p v-if="show">我從側面滑進來啦！</p> </transition>
案例 2：縮放動畫（用于彈窗）
.scale-enter-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-leave-active {
transition: all 0.2s linear;
}
.scale-enter-from {
opacity: 0;
transform: scale(0.8);
}
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}<transition name="scale">
<div class="modal" v-if="modalVisible">
<h3>歡迎彈窗</h3>
<button @click="modalVisible = false">關閉</button>
</div>
</transition>案例 3：使用 JavaScript 鉤子控制動畫
當 CSS 無法滿足需求時（如使用第三方動畫庫），可通過 JavaScript 鉤子控制。
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <p v-if="show" ref="animatedText">Hello Vue!</p> </transition>
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.transform = 'translateY(-20px)'
},
enter(el, done) {
// 使用 setTimeout 模擬動畫
setTimeout(() => {
el.style.transition = 'all 0.4s ease'
el.style.opacity = 1
el.style.transform = 'translateY(0)'
done() // 動畫結束回調
}, 10)
},
leave(el, done) {
el.style.transition = 'all 0.3s ease'
el.style.opacity = 0
el.style.transform = 'translateY(20px)'
setTimeout(done, 300)
}
}done 回調必須調用，否則 Vue 會一直等待。
案例 4：列表過渡<transition-group>
<transition> 只能包裹單個元素，若要為列表添加動畫，需使用 <transition-group>。
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from {
opacity: 0;
transform: translateY(30px);
}
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* 列表項之間的間隔動畫 */
.list-move {
transition: transform 0.3s;
}tag="ul" 指定外層容器標簽，<transition-group> 會渲染一個真實元素。
五、常見問題與解決方案
問題 1：動畫不觸發(fā)？
原因：
- 元素沒有
v-if/v-show/v-for等響應式控制 - 缺少
transition或animationCSS 屬性
解決：
.fade-enter-active {
transition: opacity 0.3s; /* 必須有 */
}問題 2：多個元素同時動畫，顯得生硬？
建議：使用 :delay 實現(xiàn)錯峰動畫
<li
v-for="(item, index) in items"
:key="item.id"
:style="{ transitionDelay: index * 50 + 'ms' }"
>
{{ item.text }}
</li>問題 3：組件切換時動畫失效？
原因：Vue 默認復用組件，未觸發(fā)銷毀重建。
解決：使用 key 強制重新渲染
<transition mode="out-in"> <component :is="currentView" :key="currentView" /> </transition>
六、高級技巧
1. 設置過渡模式（mode）
控制進入與離開的時序：
| 模式 | 說明 |
|---|---|
| in-out | 新元素先進入，舊元素再離開 |
| out-in | 舊元素先離開，新元素再進入（推薦用于路由切換） |
<transition mode="out-in"> <component :is="view" /> </transition>
2. 自定義類名（兼容第三方庫）
<transition enter-from-class="custom-enter-from" enter-active-class="custom-enter-active" leave-active-class="custom-leave-active" leave-to-class="custom-leave-to" > <p v-if="show">使用自定義類名</p> </transition>
適用于集成 Animate.css 等動畫庫。
3. 集成 Animate.css
npm install animate.css
<transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" > <p v-if="show">使用 Animate.css 動畫</p> </transition>
需引入 CSS 文件：import 'animate.css';
七、性能優(yōu)化建議
| 建議 | 說明 |
|---|---|
| 避免過度使用動畫 | 復雜動畫影響 FPS，尤其在低端設備 |
| 使用 transform 和 opacity | 這兩個屬性由 GPU 加速，性能最佳 |
| 控制動畫頻率 | 頻繁觸發(fā)的動畫建議節(jié)流（throttle） |
| 合理使用 mode | 避免同時進出造成卡頓 |
八、總結
| 功能 | 工具 | 說明 |
|---|---|---|
| 單元素過渡 | <transition> | 最常用 |
| 列表/多元素 | <transition-group> | 支持排序動畫 |
| CSS 動畫 | enter-active, leave-active | 推薦方式 |
| JS 控制 | @enter, @leave | 靈活控制復雜邏輯 |
| 第三方庫 | Animate.css, GSAP | 增強視覺表現(xiàn) |
- 優(yōu)點：語法簡潔、與 Vue 響應式系統(tǒng)無縫集成
- 缺點：復雜動畫仍需 JS 或第三方庫支持
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了react里組件通信的幾種方式小結,包含了5種方式,主要是props傳遞,回調函數(shù)作為props,Context,Redux或MobX,refs,具有一定的參考價值,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了element-ui 本地化使用教程詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了淺談vue 單文件探索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這段文章介紹了如何在Vue項目中根據(jù)窗口尺寸動態(tài)設置元素寬度的方法,重點提及了vw單位、resize事件及@vueuse/core庫的應用,適用于前端開發(fā)人員優(yōu)化布局適應性屏幕2026-05-05
這篇文章主要介紹了Vue中jsx不完全應用指南小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
在Vue項目中使用markdown-it組件預覽Markdown內容時,通過安裝pnpm和markdown-it-github-markdown-css依賴,并重寫markdown部分樣式,實現(xiàn)了Markdown內容的美化,在MarkdownPreview.vue組件中,通過變量renderedMarkdown接收并渲染Markdown內容2025-10-10
本篇文章主要介紹了Vue.js上下滾動加載組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
今天遇到一個bug,有一個Element的message組件,用它做的一個進度條,它是寫在一個頁面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁面刷新的時候它樣式加載不出來了,所以本文主要介紹了Vue項目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10
vue中formdata傳值給后臺時參數(shù)為空的問題
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06