钩子函数实现动画的方式

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中。