点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言
????最近重新夯实Vue3
,梳理的相关知识点和细节
????目前进度:
第1部分:**基础**[2] ✔
第2部分:**深入组件**[3] ✔
本文关于Vue3
中的过渡和动画,我将相关内容整理成6
张脑图,一来可以快速了解过渡和动画,二来方便以后查看!内容如下⬇
脑图
过渡和动画概述
如果没有接触过,你一定会想Vue
中如何使用过渡和动画?
简单概述,Vue
内置了<transition>
和<transition-group>
两个组件,用于更方便的处理过渡和动画,同时也可以使用class
和style
激活动画和过渡
![](https://img-blog.csdnimg.cn/img_convert/bec102669d5c3a2ce66704c4f80c103f.png)
基于class和style的过渡和动画
可以通过添加一个条件class
来激活动画,style
也是类似,本质上v-bind
动态绑定
为了更好的性能,一方面我们可以使用不触发重绘的属性,如Transform
和Opacity
;另外一方面可以对动画进行硬件加速,如通过perspective
、backface-visibility
和 transform:translateZ(x)
等
![](https://img-blog.csdnimg.cn/img_convert/5d11570cf2c8e33ba6197f1e0e6bd2db.png)
单元素/单组件的过渡
核心点是使用Vue
内置transition
组件配合v-if
和v-show
实现单元素/单组件的过渡
![](https://img-blog.csdnimg.cn/img_convert/b9ca6eaca6699b6e18c7124a8481ae98.png)
多元素/多组件的过渡
多元素的过渡需要配合v-if/v-else-if/v-else
指令
多个组件若每次只渲染一个,只需包裹动态组件即可实现;若要渲染多个,则要使用之后要讲的列表过渡
![](https://img-blog.csdnimg.cn/img_convert/a5b72d4bc19e72bb3937182cb89f3684.png)
列表过渡
使用<transition-group>
包裹要渲染的组件,配合v-for
![](https://img-blog.csdnimg.cn/img_convert/d2a08b6fea228b31e18c9287425f8c2f.png)
状态过渡
状态过渡其实就是纯数据元素的过渡,可以结合Vue
提供的东西,如监听器、响应性和组件系统等,制作出各种有意思的东西
![](https://img-blog.csdnimg.cn/img_convert/e98f2fd2ff262758f6a8850991a7666d.png)
附件
我已将以上原图及源文件已上传github
:github.com/jCodeLife/m…[4]
一来方便大家批量下载,二来可以根据自己的想法和习惯进行修改
END
以上就是Vue
中过渡和动画相关的所有内容
如有问题,欢迎留言告知,感谢~
关于本文
来源:LBJ
https://juejin.cn/post/6992134610310135838
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持