vue中钩子函数的done（）问题

Question

问题

关于vue钩子函数的done（）这一块，官方的解释是

When using JavaScript-only transitions, the done callbacks are
required for the enter and leave hooks. Otherwise, the hooks will be
called synchronously and the transition will finish immediately.
必须要为enter和leave钩子添加done回调函数，否则会变成同步调用

试着做了一个小球运动消失的动画

代码：

beforeEnter(el) {
    el.style.transform = 'translate(0,0)'
},
enter(el, done) {
    el.offsetWidth
    el.style.transform = 'translate(200px,150px)'
    el.style.transition = 'all 1s ease'
    done()
},
afterEnter(el) {
    console.log('after')
    this.flag = false
}

可以看到这样是没有问题的，但是如果把enter里面的done参数去掉同时去掉done（）这句话

enter(el) {
el.offsetWidth
el.style.transform = 'translate(200px,150px)'
el.style.transition = 'all 1s ease'

}

那么小球还是可以消失的，不过会有停顿，并且console.log（"after"）是在小球运动完后执行的，不像上面是在点击按钮后就执行
图片描述

最奇怪的是，如果不添加done（）这句话，单单只是加上一个done的参数，那么小球根本不会消失，afterEnter函数不会自动执行！

enter(el,done) {
    el.offsetWidth
    el.style.transform = 'translate(200px,150px)'
    el.style.transition = 'all 1s ease'
}

所以为什么单单只是增加一个done参数，它就不会自动执行afterEnter函数了？

Answer 1

你这不是JavaScript-only transitions，（按照你的需求来看）不要用done

Answer 2

这都被你发现，我也是卡在这里了。
翻了翻源代码发现，如果形参不指定 done ，则表明 用户不会手动控制 动画的结束，而转由节点的transition或者animationEnd 来标识动画结束，开始回调 afterEnter.

具体参考源码:

var expectsCSS = css !== false && !isIE9;
var userWantsControl = getHookArgumentsLength(enterHook);
console.log('enterHook arguments length , ' + userWantsControl);

getHookArgumentsLength 用于判断 enterHook 也就是你配置的

enter(el,done) {
    el.offsetWidth
    el.style.transform = 'translate(200px,150px)'
    el.style.transition = 'all 1s ease'
}

钩子函数的形参的个数。
当形参个数大于1，表示形参中有done, 也就是说明 用户需要手动控制动画何时结束。
也就是说一旦你配置了done形参，则转由你告诉框架，动画合适结束。
所以你需要在合适的时机调用done，否则 afterEnter接口就没法被调用了。

PS: 函数有几个形参，可以通过 functionName.length 得到。