文章目錄
- 一、為什么需要 Transition 組件？
- 二、核心工作原理
- 三、基礎用法：6個過渡類名
- 四、進階用法
- 五、 JavaScript 鉤子函數
- 六、過渡模式（Mode）
- 七、列表過渡（TransitionGroup）
- 八、與第三方動畫庫結合（如 Animate.css）
- 九、最佳實踐與性能優化
- 十、Vue3 與 Vue2 的 Transition 組件核心差異
- 十一、常見問題解決方案
一、為什么需要 Transition 組件？
當元素在 DOM 中插入、更新、移除時， Transition 組件可以：
- 實現平滑的 CSS 動畫/過渡效果
- 自動管理過渡類名的添加與移除
- 提供 JavaScript 鉤子實現復雜動畫
- 提升用戶體驗的流暢感
二、核心工作原理
<transition name='fade'><div v-if='show'>內容</div>
</transition>
流程：
- 元素插入時自動添加 v-enter-from -> v-enter-to 類名
- 元素移除時自動添加 v-leave-from -> v-leave-to 類名
- 根據 CSS 過渡或動畫時長自動處理 DOM 操作
三、基礎用法：6個過渡類名
假設 <transition name="fade">：
| 類名 | 作用階段 |
|---|---|
| .fade-enter-from | 進入動畫起始狀態 |
| .fade-enter-active | 進入動畫生效時的樣式（定義過渡時長/效果） |
| .fade-enter-to | 進入動畫結束狀態 |
| .fade-leave-from | 離開動畫起始狀態 |
| .fade-leave-active | 離開動畫生效時的樣式 |
| .fade-leave-to | 離開動畫結束狀態 |
示例1：淡出淡入
<template><button @click="show = !show">切換</button><transition name="fade"><div v-if="show" class="box">Hello</div></transition>
</template><style>
.fade-enter-from, .fade-leave-to {opacity: 0;
}
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
</style>
四、進階用法
1. 使用 CSS 動畫（非過渡）
.fade-enter-active {animation: bounce-in 0.5s;
}
.fade-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% { transform: scale(0); }50% { transform: scale(1.25); }100% { transform: scale(1); }
}
2.自定義過渡時間
<transition :duration="1000">...</transition> // 統一時長
<transition :duration="{ enter: 500, leave: 800 }">...</transition> // 分別設置
初始渲染過渡
<transition appear></transition> // 首次加載時觸發過渡
五、 JavaScript 鉤子函數
實現更復雜的動畫邏輯（如結合GSAP）
<transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled="enterCancelled"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave”@leave-cancelled="leaveCancelled"
>
</transition><script setup>
// 進入動畫
const beforeEnter = (el) => {el.style.opacity = 0;
}const enter = (el, done) => {gsap.to(el, {opacity: 1,duration: 1,onComplete: done // 必須調用 done 來結束過渡})
}
</script>
六、過渡模式（Mode）
解決進入和離開同時發生的沖突
<transition mode="out-in"> //先完成離開動畫，再執行進入動畫<component :is="view"></component>
</transition>
七、列表過渡（TransitionGroup）
處理 v-for 列表的動畫：
<transition-group name="list" tag="ul"><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group><style>
.list-move { // 處理列表排序變化的過程transition: transform 0.8s ease;
}
</style>
八、與第三方動畫庫結合（如 Animate.css）
<transitionenter-active-class="animate__animated animate__data"leave-active-class="animate__animated animate__bounceOut"
><div v-if="show">內容</div>
</transition>
九、最佳實踐與性能優化
- 優化使用 CSS 過渡：瀏覽器可優化，性能更好
- 避免過渡太多屬性：優先使用 transform 和 opacity （可硬件加速）
- 設置
:css="false"：當完全使用 JS 動畫時，跳過 CSS 類名檢測 - 合理使用 key：幫助 Vue 正確識別元素
- 列表過渡添加 v-move 類：優化排序動畫
十、Vue3 與 Vue2 的 Transition 組件核心差異
1.類名命名的變化
Vue3 將 v-enter 和 v-leave 重命名為 v-enter-from 和 v-leave-from ，使類名語義更清晰（明確表示起始狀態）。
2.根元素處理方式的差異
Vue2 的限制：
<transition>組件內必須只有一個根元素- 多元素過渡需用
<transition-group>
Vue3 的改進：
- 支持多個根元素，但需要為每個元素添加 key
<!-- Vue3 合法寫法 -->
<transition><div v-if="show" key="a">內容A</div><div v-else key="b">內容B</div>
</transition>
3.新增特性：
- transition 支持作為普通屬性傳遞
Vue3 允許直接在組件上使用 transition 屬性：
<router-view v-solt="{ Component }"><component:is="Component":transition="{ name:'fade', mode:'out-in' }"/>
</router-view>
- 更智能的過渡持續時間檢測
Vue3 會自動檢測 CSS 動畫/過渡的實際持續時間，減少手動設置:duration的需求 - appear屬性的改進
Vue3 的 appear 支持配置對象
<transitionappear:appear-class="custom-appear-class":appear-active-class="custom-appear-active-class"
>
十一、常見問題解決方案
Q1：過渡效果不生效
- 檢查元素是否應用
v-if / v-show - 確認 CSS 類名拼寫正確
- 確保過渡屬性在
-active類中
Q2：列表動畫錯位
- 為
<transition-group>添加 tag 屬性（如tag="div"） - 檢查元素是否設置正確的 key
Q3：動畫卡頓
- 使用
will-change: transform開啟硬件加速 - 簡化復雜動畫
)
