• 這是我參與11月更文挑戰的第14天，活動詳情檢視：2021最後一次更文挑戰

過渡_單元素過渡

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

單元素/元件的過渡

Vue 提供了 transition 的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態元件
• 元件根節點

過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換。

---

1. v-enter： 定義進入過渡的開始狀態。 在元素被插入之前生效，在元素被插入之後的下一幀移除。
2. v-enter-active： 定義進入過渡生效時的狀態。 在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。 這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。
3. v-enter-to: 定義進入過渡的結束狀態(2.1.8+) 。 在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

---

1. v-leave： 定義離開過渡的開始狀態。 在離開過渡被觸發時立刻生效，下一幀被移除。
2. v-leave-active： 定義離開過渡生效時的狀態。 在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。 這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。
3. v-leave-to: 定義離開過渡的結束狀態(2.1.8+) 。 在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

---

圖示： 

​

類名字首

1. transition 無 name 特性 類名字首為 v-。
2. transition 有 name 特性 如 name 為 fade，則類名字首為fade-。

CSS 動畫

CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會立即刪除，而是在 animationend 事件觸發時刪除。

自定義過渡的類名

我們可以通過以下 attribute 來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫（如 Animate.css）結合使用十分有用。

Animate.css 官網地址：Redirecting to Animate.css 安裝方式：npm install animate.css --save

最後

如果對您有幫助，希望能給個👍評論/收藏/三連！

博主為人老實，無償解答問題哦❤