transition组件的钩子函数

除了使用 CSS 原生支持的 transitionend 事件和 animationend 事件来获取过渡/动画执行完成的时机外，在使用 transition 组件开发前端过渡/动画的同时，还可以调用 transition 组件提供的 JavaScript 钩子函数来添加业务相关的逻辑，例如可以直接在钩子函数中操作 DOM 来达到动画的效果。一共有下面几种钩子函数，如示例代码 5-5-1 所示。

示例代码 5-5-1　transition 组件钩子函数的定义
<transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
    :css="false"
>
<!-- ... -->
</transition>
html

动画执行过程中的每一个节点都可以在当前组件的 methods 中定义对应的钩子函数，如示例代码 5-5-2 所示。

示例代码5-5-2　transition 组件钩子函数的使用

methods: {
    // --------
    // ENTERING
    // --------
    beforeEnter(el) {
    ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter(el, done) {
        ...
        done()
    },
    afterEnter(el) {
        ...
    },
    enterCancelled(el) {
        ...
    },
    // --------
    // 离开时
    // --------
    beforeLeave(el) {
        ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    leave(el, done) {
        ...
    done()
    },
    afterLeave(el) {
        ...
    },
    // leaveCancelled 只用于 v-show 中
    leaveCancelled(el) {
        ...
    }
}
vue

这些钩子函数可以结合 CSS 3 的 transition 或 animation 来使用，也可以单独使用。其中 el 参数表示当前元素的 DOM 对象，当只用 JavaScript 过渡时，在 enter 和 leave 中必须使用 done() 方法进行回调，如果只用 CSS 3 来实现，则不需要调用 done() 方法。如果不遵循此规则，这些钩子函数将被同步调用，过渡会立即完成。