Vue中基于class和style的过渡和动画

2021-08-04  本文已影响0人  深度剖析JavaScript

可以通过添加一个条件class来激活动画,style也是类似,本质上v-bind动态绑定

为了更好的性能,一方面我们可以使用不触发重绘的属性,如TransformOpacity;另外一方面可以对动画进行硬件加速,如通过perspectivebackface-visibilitytransform:translateZ(x)等来触发硬件加速

为了方便我将相关内容简记如下图:

2基于class和style的过渡和动画.png

更多相关原图和原始文件已上传GitHub,一来方便批量下载相关脑图,二来可以方便你按照自己的的思路进行修改!

GitHub地址:https://github.com/jCodeLife/mind-map

文中如有其他问题,欢迎留言告知~

上一篇下一篇

猜你喜欢

热点阅读