【Vue12】JS动画和Velocity.js

JS动画

前两章主要说的是CSS动画，同样也可以使用JS动画，Vue中提供了很多JS动画的钩子。
在transition上绑定一个事件钩子，当这个事件被触发的时候，执行一个函数，函数写在methods里，这个函数接收一个el参数，el指的就是动画包裹的div标签。

绑定钩子

钩子的执行函数

来看下效果图：

发生变化啦

钩子还挺多的，贴一下都有哪些钩子：

我是钩子函数1

我是钩子函数2

框出来的是可以接收两个参数的钩子。其它的都是接收 el这个参数，这两个还可以接收 done，当动画结束之后，在 enter这个钩子里，要手动执行一下 done这个回调函数，它被调用的时候表示动画已执行完，此时触发一个事件 after-enter。

完美组成入场动画1

完美组成入场动画2

同理还有出场动画： before-Leave、 leave、 after-leave，用法和入场动画一样。

Velocity.js

这个Velocity.js是js常用的一个动画库，我是Velocity.js的官网 。
使用步骤如下：

1. 下载Velocity.js（也可以不下载，通过cdn引用）
2. 在处引用

3. 按照相应的规则写对应的代码

   
   
   

   对应的代码

官网是做了这样的动画：

模板处

methods处

我觉得动画效果很酷炫，具体可在Vue官网看这段代码的效果。