Vue.js: 樣式與漸變 Transitions

Vue.js 提供已封裝好的 <transition> 元件，讓開發者在特定情況下處理單一元素或元件時，能加入進入（Enter）和離開（Leave）漸變（Transitions）的效果。 Vue.js 會自動將定義好的 class 用在漸變效果中，也可同 JavaScript 鉤子一起使用。

漸變的發生時機

• 條件渲染（Conditional Rendering，使用 v-if）
• 條件顯示（Conditional Display，使用 v-show）
• 動態元件（Dynamic Components）
• 元件的根節點（Component Root Nodes）

以下的範例是以 v-if 和 v-show 為主。

漸變的樣式類別

使用 <transition> 時，Vue.js 會在特定時間點將指定的 class 加到元素中，然後再移除，產生進入和離開的漸變效果。這些 class name 與用途、生效的時間點說明如下。

• v-enter
  • 用來定義進入漸變的開始狀態
  • 元素插入時生效，在下一幀移除
  • 有對應的鉤子 enter
• v-enter-active
  • 用來定義整個進入漸變的狀態
  • 元素插入時生效，在 transition / animation 完成時移除
  • 可用來定義進入漸變的 duration、delay 和 easing curve
• v-enter-to（版本必須是 2.1.8 以上）
  • 用來定義進入漸變的結束狀態
  • 元素插入且v-enter移除時生效，在 transition / animation 完成時移除
  • 有對應的鉤子 afterEnter
• v-leave
  • 用來定義離開漸變的開始狀態
  • 在觸發離開漸變時生效，在下一幀移除
  • 有對應的鉤子 leave
• v-leave-active
  • 用來定義整個離開漸變的狀態
  • 在觸發離開漸變時生效，在 transition / animation 完成時移除
  • 可用來定義離開漸變的 duration、delay 和 easing curve
• v-leave-to（版本必須是 2.1.8 以上） - 用來定義離開漸變的結束狀態
  • 在觸發離開漸變且 v-leave 移除時生效，在 transition / animation 完成時移除
  • 有對應的鉤子 afterLeave

圖 1：Transition Classes

圖片來源：Transition Classes

自定義樣式類別前綴詞

使用 <transition> 時，若無自定義樣式類別的前綴詞，預設是「v-」，例如：v-enter。若要自行定義，則可在 <transition> 的屬性 name 做設定。如下，定義「fade」為樣式類別的前綴詞，對應的 css class 就是 fade-enter 等。

<transition name="fade">...</transition>

.fade-enter {
  /* ... */
}
.fade-leave {
  /* ... */
}

範例

流程

對照「圖 1」一起來看範例流程。

• 點擊按鈕，「Hello World」消失：leave -> leave-active -> leave-to
• 點擊按鈕，「Hello World」出現：enter -> enter-active -> enter-to

Demo

程式碼

<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition>
    <div v-if="show">Hello World!</div>
  </transition>
</div>

.v-leave {
  opacity: 1;
}
.v-leave-active {
  transition: opacity 0.5s;
}
.v-leave-to {
  opacity: 0;
}
.v-enter {
  opacity: 0;
}
.v-enter-active {
  transition: opacity 0.5s;
}
.v-enter-to {
  opacity: 1;
}

看完整程式碼。

這裡的 v-if 可換成 v-show，差別在於 v-if 決定元素是否渲染該元素，而 v-show 是必定渲染該元素但使用 css 切換顯示和隱藏（看 v-if 與 v-show 的差異）。

以上參考 Transition Effects。