编辑“︁Vue.js JavaScript动画”︁（章节）

== JavaScript动画钩子 ==

Vue为`<transition>`组件提供了以下JavaScript钩子：

```javascript
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- 你的内容 -->
</transition>
```

每个钩子都会接收一个参数：被动画作用的DOM元素。

=== 钩子函数详解 ===

{| class="wikitable"
|+ JavaScript动画钩子函数
! 钩子函数 !! 描述 !! 调用时机
|-
| before-enter || 元素插入前调用 || 在enter过渡开始前
|-
| enter || 元素插入时调用 || 在enter过渡过程中
|-
| after-enter || 元素插入后调用 || 在enter过渡完成后
|-
| enter-cancelled || enter取消时调用 || 当enter过渡被中断
|-
| before-leave || 元素移除前调用 || 在leave过渡开始前
|-
| leave || 元素移除时调用 || 在leave过渡过程中
|-
| after-leave || 元素移除后调用 || 在leave过渡完成后
|-
| leave-cancelled || leave取消时调用 || 当leave过渡被中断
|}