vuejs中状态过渡，JavaScript 钩子中done怎么使用？

Question

vuejs官网教程中，进入/离开 & 列表过渡章节，讲到“JavaScript 钩子”
链接：JavaScript 钩子

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成

我用了他们官网提供的demo测试了一下，发现不使用done，也没有任何问题，感觉很奇怪。

这个是官网的demo：
官网的demo
我改写的demo：
我改写的demo

没看出区别，所以也没有明白上面引用那段描述的意思。

Answer 1

你连续点击就会看出区别。“同步调用，过渡会立即完成”。

Answer 2

你可以加大异步调用的时间去观察异步调用和同步调用的区别，补充一点当参数注入done时，必须进行调用，不调用，程序挂起，参数不注入done时，默认为同步调用！如果在钩子函数中有异步操作，需要使用done进行异步成功后的回调。

Answer 3

没有调用done()的话，afterenter和afterleave的钩子函数不会调用。
然后你发现你的show变成了false以后，元素还不会消失，因为vue只有调用了afterleave后才会触发display:none把元素隐藏起来实现元素的v-show效果。如果你在leave中的钩子函数直接写displa：none会发现元素直接消失，因为这个属性没有过渡效果。
至于“同步调用，过渡会立即完成”这个我也测试了好久，发现没啥影响，最骚的是

• 在leave钩子中如果不调用done，则可以过渡，但是无法隐藏，原因在上面写了。
• 如果直接调用done，则没有动画过渡效果，元素直接隐藏了。
• 必须要setTimeout异步调用(延迟设置为transition的时间最佳)，不然过渡会立即完成。

最后说几个点，有点坑。

• 一定要设置el.style.transition的时间（如果你只用js钩子的话）,不然没有过渡效果。
• enter钩子中要设置el.offsetWidth来刷新动画，不然没有过渡效果。
• enter钩子中可以同步调用done()，设置上面两步后可以过渡，而且可以触发afterenter钩子。

这么麻烦，为什么不用css呢？？