【Vue12】JS动画和Velocity.js
2018-05-25 本文已影响0人
八宝君
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的官网 。
使用步骤如下：
- 下载Velocity.js（也可以不下载，通过cdn引用）
- 在<head>处引用
-
按照相应的规则写对应的代码
对应的代码
官网是做了这样的动画：
模板处
methods处
我觉得动画效果很酷炫，具体可在Vue官网看这段代码的效果。
