学习VUE第十四天课程（VUE之多元素组件过渡+动画封装）

ゝ一世哀愁。 2023-05-29 05:22 170阅读 0赞

# 学习VUE第十三天课程（VUE之多元素组件过渡+动画封装） #

**（1）多元素过渡  
（2）多组件过渡  
（3）列表过渡  
（4）动画封装**

# 多元素过渡 #

首先介绍下如何实现多元素过渡  
**（1）利用条件编译指令v-if与v-else实现多元素内容切换.**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
**多元素过渡**  
**（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果**  
1、transition添加name属性命名  
2、设置过渡状态  
![在这里插入图片描述][20191104184816378.png]  
**多元素过渡**  
**（3）状态管理**  
测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug.。  
方案：给多元素添加不同key进行状态管理，**代码如下：**  
![在这里插入图片描述][20191104184831904.png]

# 多元素过渡-案例练习 #

**多元素过渡可以通过v-if条件指令进行控制**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
点击验证后发现，在过渡过程中area区域被重绘了，一个离开过渡的时候另一个开始进入过渡。  
这是 的默认行为 - 即进入和离开同时发生。

**方案：在元素绝对定位时候运行正常：**  
![在这里插入图片描述][2019110418491730.png]  
**也可以给元素加上转换属性，实现滑动过渡的效果**  
![在这里插入图片描述][20191104184928125.png]

# 多元素过渡-过渡模式 #

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了两种过渡模式。  
**①in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）**  
![在这里插入图片描述][20191104184944360.png]

**②out-in：当前元素先进行过渡，完成之后新元素过渡进入**  
![在这里插入图片描述][20191104184949624.png]

# 多组件过渡 #

【多组件过渡】  
接下来介绍下多组件实现过渡效果，代码如下，直接将多元素修改为多组件即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**多组件过渡也可以结合动态组件进行操作，首先写个基础动态组件案例，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]  
**接下来添加transition过渡**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# 列表过渡 #

目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动画操作。

**（1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部**  
![在这里插入图片描述][20191104185109703.png]  
**列表过渡**  
**（2）目前为止已经实现点击添加效果，如下所示**

![在这里插入图片描述][20191104185122920.png]

之前的一些过渡动画效果都是针对单个元素组件的隐藏展示，或者多个元素组件来回切换的动画效果，接下来介绍下列表过渡效果，即列表增删改动数据时的过渡动画。  
列表过渡动画标签`<transition-group></transition-group>`

**（1）对于列表过渡需要用到列表过渡标签transition-group**  
![在这里插入图片描述][20191104185148312.png]  
列表过渡  
（2）定义CSS过渡效果

![在这里插入图片描述][20191104185204216.png]

**此时再次点击便实现了列表过渡切换效果**

# 动画封装 #

前言  
如果部分效果在页面里应用较多，可以对其进行动画封装，以方便日后调用  
步骤：  
**（1）首先创建基础动画，即简单的显隐切换动画，如下所示**  
![在这里插入图片描述][20191104185222765.png]  
（2）封装动画组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

这里使用了props传值&&slot插槽  
**（3）调用组件**  
组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数

![在这里插入图片描述][20191104185246869.png]

目前为止已经实现了对动画的封装，可以任意次调用，如下所示：  
![在这里插入图片描述][20191104185251622.png]  
**（4）改良版—JS动画**  
动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。  
即将如下的CSS动画代码也封装到组件里 ：  
![在这里插入图片描述][20191104185309379.png]  
**（4）改良版—JS动画**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

# 如有问题或者疑问请留言联系小编！！！！ #

# 感谢来访！！！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104184800522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191104184816378.png]: https://img-blog.csdnimg.cn/20191104184816378.png
[20191104184831904.png]: https://img-blog.csdnimg.cn/20191104184831904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104184856755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[2019110418491730.png]: https://img-blog.csdnimg.cn/2019110418491730.png
[20191104184928125.png]: https://img-blog.csdnimg.cn/20191104184928125.png
[20191104184944360.png]: https://img-blog.csdnimg.cn/20191104184944360.png
[20191104184949624.png]: https://img-blog.csdnimg.cn/20191104184949624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104185010880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104185027325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104185047344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191104185109703.png]: https://img-blog.csdnimg.cn/20191104185109703.png
[20191104185122920.png]: https://img-blog.csdnimg.cn/20191104185122920.png
[20191104185148312.png]: https://img-blog.csdnimg.cn/20191104185148312.png
[20191104185204216.png]: https://img-blog.csdnimg.cn/20191104185204216.png
[20191104185222765.png]: https://img-blog.csdnimg.cn/20191104185222765.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191104185233603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191104185246869.png]: https://img-blog.csdnimg.cn/20191104185246869.png
[20191104185251622.png]: https://img-blog.csdnimg.cn/20191104185251622.png
[20191104185309379.png]: https://img-blog.csdnimg.cn/20191104185309379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191104185320657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70