Web前端培訓(xùn)：Vue結(jié)合Velocity.js實(shí)現(xiàn)動(dòng)畫(huà)

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

　　接下來(lái)我們通過(guò)例4-5講解如何使用Vue結(jié)合Velocity.js庫(kù)實(shí)現(xiàn)動(dòng)畫(huà)效果。

　　【例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文件中編寫(xiě)HTML結(jié)構(gòu)，具體代碼如下：

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

　　在上述代碼中，第3～4行給標(biāo)簽添加了beforeEnter和enter兩個(gè)入場(chǎng)動(dòng)畫(huà)函數(shù)，和一個(gè)leave出場(chǎng)動(dòng)畫(huà)函數(shù)。

　　(4)在demo05.html文件中編寫(xiě)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)元素的基點(diǎn)位置
      el.style.color = 'red'                // 顏色為紅色
  },
  enter (el, done) {
      Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                                                   // duration為動(dòng)畫(huà)執(zhí)行時(shí)間
      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庫(kù)實(shí)現(xiàn)動(dòng)畫(huà)效果，其中，第12～22行調(diào)用了Velocity()函數(shù)，該函數(shù)的第1個(gè)參數(shù)是DOM元素，第2個(gè)參數(shù)用來(lái)傳入CSS參數(shù)列表，第3個(gè)參數(shù)表示動(dòng)畫(huà)的配置項(xiàng)。

　　(5)在瀏覽器中打開(kāi)demo05.html，觀察動(dòng)畫(huà)效果是否生效。