【快速入門Vue系列】第二十七篇:初識vue動畫,transition元件

語言: CN / TW / HK

過渡_單元素過渡

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

最後

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

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

「其他文章」