Vue.js: 動畫 Animations

Vue.js 的基本動畫效果。

客製化樣式類別

客製化樣式類別的方法有兩種:重設前綴詞或覆寫預設的樣式類別。也就是說,除了在<transition>中設定屬性「name」來重設 Class Name 的 Prefix 外,也可加入以下屬性,直接覆寫預設的樣式類別,這在使用既有的動畫庫時特別有用,例如:Animate.css。

對照-漸變的樣式類別

範例

客製化樣式類別如下,展示一個 fadeIn / fadeout 的灰色方塊。取代預設的v-enter-activev-leave-active,改用自定義的fade-enter-activefade-leave-active

<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition
    enter-active-class="fade-enter-active"
    leave-active-class="fade-leave-active">
    <div class="block" v-if="show"></div>
  </transition>
</div>
.fade-enter-active { animation: go 4s; }
.fade-leave-active { animation: back 4s; }

看完整程式碼與 Demo

鉤子

<transition>中綁定鉤子(JavaScript Hooks),可和 CSS 漸變和動畫效果一起使用。

使用 JavaScript Hooks 的完整範例

備註:可使用:bind:css="false"停用偵測 CSS 漸變效果。

範例

第一次點擊按鈕後,方塊由白色轉為灰色;第二次點擊按鈕後,再由灰色轉為白色。

流程

Vue.js: 動畫 Animations

程式碼

<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition>
    <div class="block" v-if="show"></div>
  </transition>
</div>
.v-enter-active {
  animation: go 4s;
}

.v-leave-active {
  animation: back 4s;
}

@keyframes go {
  from { background: #fff; }
  to {background: #999;}
}

@keyframes back {
  from { background: #999; }
  to { background: #fff; }
}
var vm = new Vue({
  el: "#app",
  data: {
    show: false
  }
})

看完整程式碼

Demo

Vue.js: 動畫 Animations

推薦閱讀

以上參考 Transition Effects


comments powered by Disqus