Vue.js: 樣式與漸變 Transitions

28 May 2017

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

漸變 Transitions

程式碼

<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;
}