关于8-13节动画的执行问题

Question

我发现老师为了实现动画效果，一共分了三个步骤

步骤1老师最开始是在外层加了一个v-show，然后通过Popupvisible同时控制外层和内层（transitions内层），这个时候进入的动画是好的，出去的动画不对

步骤2然后（8-13节 视频21分20秒）老师通过了两个字段，popupVisible和visible分别控制外层和内层的显示，并且使用了延迟，并且老师把v-show改成了v-if（8-13节 视频22分13秒）让出场的动画成功执行，但这个时候入场动画出了问题

步骤3（视频的8-13节 23分40秒） https://coding.imooc.com/learn/questiondetail/104926.html 老师使用了一个setTimeout，成功让入场动画执行，可能正如这里同学回答一样，触发了浏览器重绘。

这里我有一些问题，
第一个问题：为什么步骤1的时候入场动画执行没问题，但步骤2的时候出场动画执行就有问题了，这里跟v-show 改成v-if后带来的影响有关吗？
第二个问题：步骤2中老师解决了出场动画的问题，是否跟我理解的一样，老师的代码实现了外层的display延迟消失，这样就不影响内层动画的执行？
第三个问题：步骤3中老师为何使用了setTimeout之后，入场动画就能执行？是否跟浏览器的重绘有关，如果是这里为什么要用浏览器的重绘呢，具体的作用是什么？为什么不重绘，入场动画就不执行？ 如果跟浏览器重绘无关，那这又是什么原理呢？

问题比较多，描述可能也不够清晰，但还是希望老师能给予解答，有关vue动画和重绘相关知识等资料非常少，这个问题也困扰了我很久，谢谢老师。

Answer 1

Sam 2020-01-12 00:09:32

你好，首先感谢你这么认真地学习课程，比提出自己的见解，先赞一个！

第一个问题：你的理解是对的，造成问题的原因就是将 v-show 改成了 v-if！v-if 切换显示状态时，同时切换 popupVisible 和 visible 时，我们的 popup DOM 还没出现，我们就将 visible 置为 true 了，导致 transition 动画未被触发。

第二个问题：你的理解是对的，我们的 transition 动画是 200毫秒，所以设置了 200 毫秒延迟后再执行外层的隐藏，这样确保了 transition 动画执行完毕后再隐藏，所以出场动画的问题得以解决。

第三个问题：使用 setTimeout 就能显示动画，这个问题涉及 $nextTick 的实现原理：这是因为 vue 设置 visible 为 true 后，会触发 visible 的 setter 方法，该方法中会触发 Watcher 的重绘，vue 提供 this.$nextTick() 方法赋予我们在渲染后执行特定操作的能力，this.$nextTick() 方法在 Vue 2.x 中的实现原理是 Promise，我们知道 Promise 是微任务，在宏任务之前执行，而 setTimeout 属于宏任务，所以 setTimeout 其实在 this.$nextTick() 执行，所以此时已经触发 Vue 的渲染逻辑，DOM 已经显示出来，所以我们的过渡动画自然也能生效了

Answer 2

小俊001 2020-01-08 18:04:30

同学您好，关于第一个问题，可以参考老师在这里的回答。https://coding.imooc.com/learn/questiondetail/160333.html

同时，v-if与v-show，一个是改变通过display为none来控制是否显示，一个是删除dom元素来控制是否显示。所以会对transition动画效果有影响。

后面的问题，我再联系老师进行跟踪，请耐心等待。

• 提问者 mylovef #1

  谢谢回答，但是你给我的那个链接，跟我问的问题不是一回事，他那个很显而易见的，两个transition都需要有字段控制，我的问题1中，老师把v-show改成v-if这个的前后，transition内部都是有字段控制显示隐藏的，所以两个问题完全不是一回事。你说的v-if和v-show不同的概念这个我也是知道的，我也感觉他会影响动画，但是具体表现在哪里，他是为什么，怎么样影响动画呢？网上资料完全是一片空白。