6张脑图带你了解Vue3中的过渡和动画 | 附高清原图

末蓝、 2022-09-10 12:09 118阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

# 前言 #

????最近重新夯实`Vue3`，梳理的相关知识点和细节

????目前进度：

*  第1部分：\*\*基础\*\*\[2\] ✔
 *  第2部分：\*\*深入组件\*\*\[3\] ✔

本文关于`Vue3`中的过渡和动画，我将相关内容整理成`6`张脑图，一来可以快速了解过渡和动画，二来方便以后查看！内容如下⬇

# 脑图 #

## 过渡和动画概述 ##

如果没有接触过，你一定会想`Vue`中如何使用过渡和动画？

简单概述，`Vue`内置了`<transition>`和`<transition-group>`两个组件，用于更方便的处理过渡和动画，同时也可以使用`class`和`style`激活动画和过渡

![82e91c11da561cd914147174b25c4dd1.png][] 1过渡和动画概述.png

## 基于class和style的过渡和动画 ##

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

为了更好的性能，一方面我们可以使用不触发重绘的属性，如`Transform`和`Opacity`；另外一方面可以对动画进行硬件加速，如通过`perspective`、`backface-visibility` 和 `transform:translateZ(x)`等

![68d9c1fc0e51cb7703bae380d6386ddf.png][] 2基于class和style的过渡和动画.png

## 单元素/单组件的过渡 ##

核心点是使用`Vue`内置`transition`组件配合`v-if`和`v-show`实现单元素/单组件的过渡

![10fb642c6e97fcc403a0e2c7ed0680b9.png][] 3单元素单组件的过渡.png

## 多元素/多组件的过渡 ##

多元素的过渡需要配合`v-if/v-else-if/v-else`指令

多个组件若每次只渲染一个，只需包裹动态组件即可实现；若要渲染多个，则要使用之后要讲的列表过渡

![ed40c269f316e0cdd8ccecfa74e3c924.png][] 4多元素多组件的过渡.png

## 列表过渡 ##

使用`<transition-group>`包裹要渲染的组件,配合`v-for`

![e0aa23f6458306ea95092a595f6446fa.png][] 5列表过渡.png

## 状态过渡 ##

状态过渡其实就是纯数据元素的过渡，可以结合`Vue`提供的东西，如监听器、响应性和组件系统等，制作出各种有意思的东西

![2cdcb98ffee40a34c8b44e27c63749c0.png][] 6状态过渡.png

# 附件 #

我已将以上原图及源文件已上传`github`：github.com/jCodeLife/m…\[4\]

一来方便大家批量下载，二来可以根据自己的想法和习惯进行修改

# END #

以上就是`Vue`中过渡和动画相关的所有内容

如有问题，欢迎留言告知，感谢~

关于本文

# 来源：LBJ #

https://juejin.cn/post/6992134610310135838

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

![2fd559644a69fa20852c730d1bdabb39.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![c69003245f5ed472c2175af97e815784.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![66e14154fc351a23a05710533d87d30c.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![34195dae575ea7e3ac72e33042d4fc2d.png][]

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![67fc41d143ab833beaff63c3ce2b12e7.png][]

点个**在看**支持我吧

![b4ce6c366ba0b4d82d609f714d0b4551.gif][]

[82e91c11da561cd914147174b25c4dd1.png]: /images/20220829/a14f363a24394e71b5ee3d78ba24335f.png
[68d9c1fc0e51cb7703bae380d6386ddf.png]: /images/20220829/ca733adf0c7a47b097a44e9c5b9564ba.png
[10fb642c6e97fcc403a0e2c7ed0680b9.png]: /images/20220829/7b9226f556c04a5cb3f35e09d56e2b27.png
[ed40c269f316e0cdd8ccecfa74e3c924.png]: /images/20220829/cb398c9ebf5c42c49ceb409f14ad5f8e.png
[e0aa23f6458306ea95092a595f6446fa.png]: /images/20220829/6be7ed039df9400ea7b7834ca509bbfb.png
[2cdcb98ffee40a34c8b44e27c63749c0.png]: /images/20220829/16d4d46a78bd4d6f8512bce1b6a273ec.png
[2fd559644a69fa20852c730d1bdabb39.png]: /images/20220829/7d0534e583024e0ba56b82bd4a277548.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175e460c6026d76bcdfc6dd42cfe80a3f14ea832d1922d65043f666d6de22bd17b09e779ed9&idx=2&mid=2649829027&scene=21&sn=1a433047a8d6e8af65012bfa0bd27e3f#wechat_redirect
[c69003245f5ed472c2175af97e815784.png]: /images/20220829/be1b5a77318346d7b6e1cc7356340fea.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175ef9ec60266880a86f33085ff43f95e3180846c5f139cb9b1b33c3245201157f39d949e9a&idx=1&mid=2649826653&scene=21&sn=9e5e2de78a8ef4de3820769ff3ab7c02#wechat_redirect
[66e14154fc351a23a05710533d87d30c.png]: /images/20220829/6ed66fe6ff7c4924921b07972eacafab.png
[2020]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175f306c6027a1029967cde600630a5107fbbfdd125b64ba3f2c9d9b570b102162ab4c3b373&idx=1&mid=2649831877&scene=21&sn=9352cf4624308602c50a6fd10379d132#wechat_redirect
[34195dae575ea7e3ac72e33042d4fc2d.png]: /images/20220829/bb6b7d00083949a093fb57dd5efa7690.png
[67fc41d143ab833beaff63c3ce2b12e7.png]: /images/20220829/70bbef8a60594661bb1e691ea2e9deac.png
[b4ce6c366ba0b4d82d609f714d0b4551.gif]: /images/20220829/198efe09dee34a6f88b796eb29a42881.png