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

来源:7-11 书城首页(卡片翻转动画实现)

mylovef

2020-01-08

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

步骤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动画和重绘相关知识等资料非常少,这个问题也困扰了我很久,谢谢老师。

写回答

2回答

Sam

2020-01-12

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

第一个问题:你的理解是对的,造成问题的原因就是将 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 已经显示出来,所以我们的过渡动画自然也能生效了

2
0

小俊001

2020-01-08

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

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

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

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

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构,完整项目流程

1610 学习 · 1951 问题

查看课程