Web前端培训：Vue结合Velocity.js实现动画

　　Velocity.js是一个简单易用、高性能且功能丰富的轻量级JavaScript动画库，它拥有颜色动画、转换动画(transform)、循环、缓动、SVG动画和滚动动画等特色功能。它支持Chaining链式动画，当一个元素连续应用多个velocity()时，动画以列队方式执行。

　　接下来我们通过例4-5讲解如何使用Vue结合Velocity.js库实现动画效果。

　　【例4-5】

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

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

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

　　(3)在demo05.html文件中编写HTML结构，具体代码如下：

<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两个入场动画函数，和一个leave出场动画函数。

　　(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'     // 设置旋转元素的基点位置
      el.style.color = 'red'                // 颜色为红色
  },
  enter (el, done) {
      Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                                                   // duration为动画执行时间
      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库实现动画效果，其中，第12～22行调用了Velocity()函数，该函数的第1个参数是DOM元素，第2个参数用来传入CSS参数列表，第3个参数表示动画的配置项。

　　(5)在浏览器中打开demo05.html，观察动画效果是否生效。