1

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

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

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

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

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

2018-10-05 提问
3 个回答
1

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

1

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

0

没有调用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呢??

撰写答案

你可能感兴趣的

推广链接