Vue過渡搭配Velocity.js動畫的基本使用

Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不僅包含了 $.animate() 的全部功能， 還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特色功能。
Velocity.js 中文文檔

1.安裝

npm i velocity-animate

2.導入

velocity.ui.js 是 velocity.js 的 動畫插件（1.8 KB ZIP’ed） 我們可以用它快速創建炫酷的動畫特效，它依賴於 velocity.js

import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'

3.使用

可以在 attribute 中聲明 JavaScript 鉤子,詳情見官方文檔

  <transition v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
    <!-- 需要執行動畫的內容 -->
  </transition>

    /**
     * @description: 進入動畫
     * @param {Object} el 觸發動畫的元素
     * @param {Function} done 動畫函數已經執行完畢
     */
    enter(el, done) {
      Velocity(
        el,
        'transition.shrinkIn',
        {
          duration: 500
        },
        function() {
          done()
        }
      )
    },

    /**
     * @description: 離開動畫
     * @param {Object} el 觸發動畫的元素
     * @param {Function} done 動畫函數已經執行完畢
     */
    leave(el, done) {
      Velocity(
        el,
        'transition.shrinkOut',
        {
          duration: 500
        },
        function() {
          done()
        }
      )
    }