Vue.js: 樣式與漸變 Transitions

Vue

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

漸變的發生時機

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

漸變的樣式類別

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

Transition Classes 圖 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」一起來看範例流程。

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

看完整程式碼

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

以上參考 Transition Effects


comments powered by Disqus