【Vue学习】关于transition过渡动画的收获

3,386 阅读5分钟

这两天做了一个Vue页面需要自己写一个动画,但是项目中的动画都是直接在元素中使用封装好的动画class名。于是我就想为啥不用一下transtion呢?

于是我就参考了两篇文章,大体上对transtion这个标签有了一定的理解。

入门

第一篇文章是偏向教学讲解的,vue官网上面的例子没有很具体的代码,而这篇文章贴出来了比较详细的代码和GIF截图,真的是让人一看就懂:

点这里:vue中的过渡和动画(详细的代码演示和讲解)

收获

1、<transition>标签只能用来包裹单元素。

2、只有在<transition>标签上面加上appearprop才可以在页面第一次加载的时候就执行过渡或者动画。之前我试着使用transition的时候还想着为啥初次加载的时候不执行动画,看了这篇文章之后才知道是怎么回事。

3、无论是过渡还是动画,原理都是在特定的时间为transtion包裹的最外层元素添加和删除class名。

4、那么这个时候你有没有一个疑问呢?就是为啥Vue知道动画或者过渡什么时候执行完了的?这是因为Vue监听了目标元素【也就是transition标签包裹的最外层的这个元素】的transitionendanimationend这两个事件。在这之前我还真没听说过这两个事件,这次算是涨见识了。API详情:transitionend事件animationend事件

5、如果不自定义初次渲染class名——appear-active-class等的话,默认就会使用进入时需要的那几个class名——enter-active-class等。

6、其实transition中不一定非得是单元素。也可以有多个元素,但是必须要使用v-if来控制其显隐。确保只能有一个处于显示状态的单元素。

7、v-enter这个class名在使用animation动画的时候用的不多,因为在动画中基本都需要执行开始状态和结束状态。但是在使用transition过渡的时候就起到了animation动画中的form或者0%的作用,用来指定起始状态。而v-enter-to感觉好像就有点鸡肋了,我目前也不知道什么时候需要应用这个。

8、duration这个prop会强制的指定动画需要多少时间执行完毕,当指定了这个prop之后。就不再根据transitionendanimationend这两个事件来决定什么时候执行完毕然后删除class名了。时间一到就直接删除class名。如果duration指定的时间大于animation-duration或者tansition-duration,动画或者过渡执行完毕,也不会删除掉class名,而是等duration这个prop指定的时间结束之后再删除。应用场景的话就是:

我们可以拥有一个精心编排的一系列过渡效果,其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。——这段话出自官网

9、JS钩子函数应该就是用来写JS动画的,不过这个我用的不多,没什么发言权,就不说了。

进阶

接下来这篇文章就是关于transition组件实现原理源码层次的解读了。

点这里:Vue原理解析(十二):不让过渡/动画成为短板之transition组件实现原理

不过....很遗憾的是,其实大部分代码我是看不太懂的,更别说很多专业名词了。我贴出来只是想为那些基础更好的同学能更方便的点进去看看..或者是以后如果我有能力看懂了的话再去看一下。

收获

其实收获很简单,就是文章最后的那个问题:请说明一下transition组件的实现原理:

transition组件是一个抽象组件,它不会渲染出任何DOM元素,它的作用就是为了方便我们更方便的写出动画。transition以插槽的形式对内部的单一子节点进行动画的管理,在渲染阶段就会往子节点的虚拟DOM上面的data属性上面挂载一个transition属性,表示它的一个被transition组件包裹的节点,在path阶段就会执行transition组件内部钩子,钩子里分为enterleave状态,在这个被包裹的子节点上使用v-ifv-show进行状态的切换。你可以使用CSS也可以使用JavaScript钩子,使用CSS方式时会在enter/leave状态内进行class类名的添加和删除,用户只需要写出对应类名的动画即可。如果使用JavaScript钩子,则也是按照顺序的执行指定的函数,而这些函数也是需要用户自己定义,组件只是控制这个的流程而已。

结语

很遗憾的是,我现在对上述内容还是处于看不懂的状态。希望以后自己对VUE的了解加深之后再来会看这篇文章吧。 不过所幸的是,看完第一篇文章之后我就对如何使用transition标签有了一个初步的理解了。