钩子函数分为入场钩子和出场钩子，具体分类及含义如下所示
首先新建个普通组件，可以实现简单显隐切换
接下来结合案例来介绍下动画钩子函数 （1）入场钩子before-enter进入过渡前状态 验证如下所示
此外，before-enter函数还包含一个el参数，表示绑定过渡动画的元素。验证如下 （1）入场钩子before-enter进入过渡前状态 before-enter函数之el元素参数，例如在进入过渡前将文本颜色变为红色
为了方便测试，这里我将文本字体设置大点 （2）入场钩子enter过渡进入完成时状态 语法： enter钩子和before-enter稍微有些差异，before-enter会接受两个参数，语法为enter(el,done)，done为回调函数 触发时机： 当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。 （2）入场钩子enter过渡进入完成时状态 案例：2s后元素字体颜色变绿 （2）入场钩子enter过渡进入完成时状态 done回调函数： 当动画执行结束后需要手动去调用done回调函数，告诉vue动画执行完毕，至此才可以进行下一步操作，代码如下所示 （3）入场钩子after-enter过渡完成后 执行时机： 在enter过渡进入完成后触发done()回调函数，告知vue动画执行完毕，下一步执行after-enter过渡完成后钩子函数。 要求：过渡完成后字体变黑 （3）入场钩子after-enter过渡完成后 为了测试效果更加明显，接下来修改下代码，将动画时长调至4s结束。 即2s时字体发生变化，4s时才结束动画，如下所示 （4）入场钩子enter-cancelled过渡被打断 入场钩子小结 入场钩子简单语法总结如下
出场钩子与入场钩子语法类似，自行验证即可 1、before-leave(el)离开过渡运行前 2、leave(el,done)离开过渡运行时 3、after-leave(el)离开过渡运行后 4、leave-cancelled(el)离开过渡被打断时
注意： leave与enter同样，接收两个参数即el和done回调函数。
小结： 上面的钩子函数中可以进行任何你想做的DOM操作。
小技巧： 如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。
【前言】 随着互联网越来越丰富多样，网页端的美化和新技术层出不穷，作为一个网站的浏览者，更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效。 网页的交互动效大概分为 css动画，js动画 。
案例链接：http://www.bootstrapmb.com/item/2084/preview 为什么是velocity不是jquery？ 当前，如何快速制作js动效，许多人可能会首先想到使用jquery。 使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻，简单易用，高效开发。但要知道jquery动画性能并不是最优的。 因为jquery想要实现的目标太多，动画性能上就不可避免做出妥协。因此要制作高性能js动画，可能不得不放弃jquery，转而使用原生js制作动画。那有没有一种js高性能动效库，既像jquery一样简单易用，动画又高性能？这就是velocity.js动画库了。 js动画 JS动画的库非常多，各有各的有点，比如jquery自带的animate动画还有 webGL,或者利用canvas，SVG等实现其他效果，本节来讲的就是众多库中的其中一个 velocity.js 动画库。 velocity.js 既可以单独用JavaScript使用，也可以配合jquery使用，使用方法(注意先将velocity.js下载好后在body标签下引入，然后在新script标签中书写效果实现语法即可) JS动画VS传统css动画： 既然我们大概了解了这两类动画，接下来分析下两者区别 1、css动画→由于css3可以根据css属性自定义动画，所以这类动画的优点就是不用进行计算和更改dom 会显得非常流畅 2、JS动画→js动画拥有强大的性能，并且优于css动画的特点就是 既然是根据js来改变属性值，所以没有css那样的局限性，可以实现更多的功能和动效，或许有人说js动画某些库会很慢，其实js动画本质很快，只是jquery让它慢了下来。因为有时候由于配合jquery使用，所以由于jquery本身的一些功能，所以在实现的时候就会显得很慢。 Velocity.js动画库优点 1、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 2、Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。 3、有几十种类似animate.css的预定义动画api 4、支持自定义动效，拼装队列动效等等 5、动画回调 比如 Begin & Complete & Progress 回调函数 Velocity.js动画库趣点： velocity会自动记录下动画执行的路径、时间以及效果等，然后会按动画原效果返回。也就是说，不管你动画效果设计得再复杂，如果要动画原路返回，只需一句代码 动画效果原路返回。如果我们做了一个比较炫酷或者比较复杂的动画效果，然后需要制作动画原路返回的效果，只需如此：
$element.velocity("reverse")接下来介绍个JS常用动画库Velocity.js发音[vəˈlɒsəti]→译为高速
首先打开Velocity官网 链接：http://velocityjs.org 其他相关API和语法可以参阅Velocity.js 中文文档 链接：http://shouce.jb51.net/velocity/index.html 接下来结合具体案例来介绍下Vue+Velocity.js实现相关动效 （1）引入Velocity.js文件 （2）接下来清除原先动画钩子创建的自定义动画，开始使用Velocity.js实现特效，代码重置如下所示。 （3）结合动画钩子，设定入场前透明度为0，如下所示
（4）入场前为0，动画开始执行到enter阶段时，希望透明度由0慢慢变为1，即设置入场动画过程透明度为1，结合Velocity.js代码库，代码如下所示 （5）complete完结属性 目前为止，测试后发现可以出现效果，但是存在BUG…
小结： 目前为止，便已经可以使用Vue中动画钩子实现JS动画效果，并且可以结合Velocity.js动画库进而通过简单语法实现一些酷炫的动画效果。 关于Velocity.js的其他用法可以去Velocity官网阅读相关API测试即可。
