前幾篇我們學習了事件處理。本篇將介紹 過渡與動畫，讓 Vue 頁面更加生動。

---

目錄

1. transition 組件
2. 進入與離開過渡
3. 過渡類名
4. 結合 CSS 動畫
5. JavaScript 鉤子
6. 小結

---

transition 組件

Vue 提供了內置組件 <transition>，可以為元素或組件的進入和離開添加動畫效果。

<div id="app"><button @click="show = !show">切換</button><transition name="fade"><p v-if="show">Hello Vue!</p></transition>
</div><script>
new Vue({el: '#app',data: {show: true}
})
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

點擊按鈕時，文字淡入淡出。

---

進入與離開過渡

當元素插入或移除時，Vue 會自動應用 過渡類名：

• .v-enter：進入開始狀態
• .v-enter-active：進入過渡狀態
• .v-enter-to：進入結束狀態
• .v-leave：離開開始狀態
• .v-leave-active：離開過渡狀態
• .v-leave-to：離開結束狀態

通過這些類名，我們可以自由定義動畫效果。

---

過渡類名

使用 <transition name="fade"> 時，Vue 會自動拼接類名：

fade-enter
fade-enter-active
fade-enter-to
fade-leave
fade-leave-active
fade-leave-to

這樣可以為不同過渡定義不同樣式。

---

結合 CSS 動畫

過渡不僅可以用 transition，也可以用 @keyframes 動畫。

<transition name="bounce"><p v-if="show">跳動的文字</p>
</transition><style>
.bounce-enter-active {animation: bounce-in 0.8s;
}
.bounce-leave-active {animation: bounce-in 0.8s reverse;
}
@keyframes bounce-in {0% { transform: scale(0.5); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}
</style>

效果：文字從小放大，帶有彈跳感。

---

JavaScript 鉤子

除了 CSS，還可以用 JavaScript 控制過渡。

<div id="app"><button @click="show = !show">切換顯示/隱藏</button><transition @before-enter="beforeEnter" @enter="enter" @leave="leave"><p v-if="show">JS 控制動畫</p></transition>
</div><script>new Vue({el: '#app',data: { show: true },methods: {beforeEnter(el) {// 動畫開始前el.style.opacity = 0;},enter(el, done) {// 進入動畫setTimeout(() => {el.style.transition = "opacity 1s";el.style.opacity = 1;done(); // 通知 Vue 動畫結束}, 0);},leave(el, done) {// 離開動畫el.style.transition = "opacity 1s";el.style.opacity = 0;setTimeout(done, 1000);}}})</script>

這里用 JS 精準控制了進入和離開的動畫。

---

小結

1. 使用 <transition> 可以為元素添加過渡動畫。
2. Vue 自動應用過渡類名，如 .fade-enter、.fade-leave-to。
3. 過渡既可以用 CSS transition / animation，也可以用 JavaScript 鉤子。

---

📚 下一篇文章，我們將學習 Vue Router 入門，掌握路由配置和頁面切換。