vue里面使用Velocity.js

英文文檔：http://velocityjs.org/

                  https://github.com/julianshapiro/velocity

中文手冊（教程）：http://www.mrfront.com/docs/velocity.js/ 

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

它比 $.animate() 更快更流暢，性能甚至高於 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳組合，它支持所有現代瀏覽器，最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被數以千計的公司使用在自己的項目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，這里Libscore.com 統計了哪些站點正使用 velocity.js。

 

Vue中如何使用：

安裝  npm install velocity-animate@beta

頁面引入： import  Velocity from 'velocity-animate'

使用：

<template>
  <!--使用Velocity實現動畫-->
  <div class="donghuagouzi">
    <transition
      name="fade"
      @before-enter="handleVeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">hello World</div>
    </transition>
    <button @click="handleClick">toggle</button>
  </div>
</template>

<script>
  import Velocity from 'velocity-animate'

  export default {
    name: 'donghuagouzi',
    data () {
      return {
        show: true
      }
    },
    methods: {
      handleClick: () => {
        this.show = !this.show
      },
      handleVeforeEnter: (el) => {
       el.style.opacity = 0
      },
      handleEnter: (el, done) => {
        Velocity(el, {
          opacity: 1
        }, {
          duration: 1000,
          complete: done
        })
      },
      handleAfterEnter: () => {
        console.log('動畫結束')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>