钩子函数实现动画的方式
Vue中可以使用CSS动画，我们还可以通过JavaScript来实现动画。我们在标签中定义了一些动画钩子函数，可以来实现动画。
钩子函数可以结合CSS过渡(transitions)、动画(animations)使用，还可以单独使用，示例代码如下：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
v-bind:css="false"></transition>
在以上代码中，入场钩子函数分别是beforeEnter(入场前)、enter(入场)、afterEnter(入场后)和enterCancelled(取消入场)，出场钩子函数分别是beforeLeave(出场前)、leave(出场)、afterLeave(出场后)和leaveCancelled(取消出场)。第10行行为仅使用JavaScript过渡的元素添加v-bind:css=”false”，表示给CSS绑定了false值，Vue会跳过CSS的检测，避免过渡过程中受到CSS的影响。
下面我们演示如何在methods中编写钩子函数,示例代码如下:
methods: {
// beforeEnter 入场钩子函数
// 动画入场之前,此时动画尚未开始，设置元素开始动画之前的起始样式
beforeEnter(el) {},
// enter用于设置动画开始之后的样式
enter(el, done) {
// ...
done()
},
// 在入场动画完成之后会调用
afterEnter(el) {},
enterCancelled(el) {},
// 出场钩子函数
beforeLeave(el) {},
leave(el, done) {
// ...
done()
},
afterLeave(el) {},
leaveCancelled(el) {},}
上述代码中，所有的钩子函数都会传入el参数(el为element的缩与)，el指的是动画包裹的标签。其中，enter和 leave动画钩子函数，还会传入done作为参数，用来告知 Vue动画结束。在enter和 leave中,当与CSS结合使用时，回调函数done是可选的，而当使用JavaScript过渡的时候，回调函数done是必须的，否则过渡会立即完成。
enterCancelled和 leaveCancelled动画钩子函数只应用于v-show中。
