Vue.js: 樣式與漸變 Transitions

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 .5s }
.v-leave-to { opacity: 0; }
.v-enter { opacity: 0; }
.v-enter-active  { transition: opacity .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