[Vue.js] 自訂動畫效果- Animation

標籤: Vue.js javascript

延續 transition,在 vue 裡要做 transition 的效果可以使用之前提的 name="xxx" 修改動畫 class 前綴的字,也可以使用以下屬性直接設定動畫進入或離開時的 class name,比如使用一些預設的 css 動畫函式庫就會很有用像是 animate.css

對應之前的 transition 我們在各階段可以使用的屬性有以下這些:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

 

我這邊搭配 animate.css,在 transition 加上 enter-active-class="bounceIn" 和 leave-active-class="bounceOut" 設定進入和離開的動畫。

 

在 2.2.0 以後,可以直接設定漸變時間像這樣 :duration="1000",或像這樣設定進入跟離開的漸變時間 :duration="{ enter: 500, leave: 800 }"

也可以綁定 javascript hook 來做漸變和動畫效果像這樣:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

 

js 的部分:

// ...
methods: {
  // --------
  // ENTERING
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // LEAVING
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled only available with v-show
  leaveCancelled: function (el) {
    // ...
  }
}

 

這邊是官方提供的範例,搭配 velocity.js

 

官方的文件說明