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

延續 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

官方的文件說明