Web前端培訓：Vue結(jié)合Velocity.js實現(xiàn)動畫

　　Velocity.js是一個簡單易用、高性能且功能豐富的輕量級JavaScript動畫庫，它擁有顏色動畫、轉(zhuǎn)換動畫(transform)、循環(huán)、緩動、SVG動畫和滾動動畫等特色功能。它支持Chaining鏈式動畫，當一個元素連續(xù)應(yīng)用多個velocity()時，動畫以列隊方式執(zhí)行。

　　接下來我們通過例4-5講解如何使用Vue結(jié)合Velocity.js庫實現(xiàn)動畫效果。

　　【例4-5】

　　(1)獲取velocity.min.js文件，保存到chapter04目錄中。

　　(2)創(chuàng)建C:\vue\chapter04\demo05.html文件，引入velocity.min.js，如下所示：

<script src="velocity.min.js"></script>

　　(3)在demo05.html文件中編寫HTML結(jié)構(gòu)，具體代碼如下：

<div id="app">
  <button @click="show=!show">動畫效果</button>
  <transition @before-enter="beforeEnter" @enter="enter"
   @leave="leave" v-bind:css="false">
    <p v-if="show">文字動畫效果</p>
  </transition>
</div>

　　在上述代碼中，第3～4行給標簽添加了beforeEnter和enter兩個入場動畫函數(shù)，和一個leave出場動畫函數(shù)。

　　(4)在demo05.html文件中編寫JavaScript代碼，具體代碼如下：

var vm = new Vue({
    el: '#app',
    data: {
        show: false,
    },
methods: {
  beforeEnter (el) {
      el.style.opacity = 0                  // 透明度為0
      el.style.transformOrigin = 'left'     // 設(shè)置旋轉(zhuǎn)元素的基點位置
      el.style.color = 'red'                // 顏色為紅色
  },
  enter (el, done) {
      Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                                                   // duration為動畫執(zhí)行時間
      Velocity(el, {fontSize: 'lem'}, {complete: done})
  },
  leave (el, done) {
    Velocity(el, {translateX: '15px', rotateZ: '50deg'},
     {duration: 3000})
    Velocity(el, {rotateZ: '1000deg'}, {loop: 2})
    Velocity(el, {rotateZ: '45deg', translateY: '30px',
     translateX: '30px', opacity: 0}, {complete: done})
   }
  }
})

　　上述代碼演示了利用Velocity.js庫實現(xiàn)動畫效果，其中，第12～22行調(diào)用了Velocity()函數(shù)，該函數(shù)的第1個參數(shù)是DOM元素，第2個參數(shù)用來傳入CSS參數(shù)列表，第3個參數(shù)表示動畫的配置項。

　　(5)在瀏覽器中打開demo05.html，觀察動畫效果是否生效。