Vue之多元素组件过渡+动画封装

灰太狼 2023-05-29 05:13 120阅读 0赞

## 课程大纲 ##

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

## 多元素过渡 ##

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

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

*  多元素过渡可以通过v-if条件指令进行控制  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  点击验证后发现，在过渡过程中area区域被重绘了，一个离开过渡的时候另一个开始进入过渡。
 *  这是 `<transition>` 的默认行为 - 即进入和离开同时发生。  
    方案：在元素绝对定位时候运行正常：  
    ![在这里插入图片描述][20191104162446342.png]
 *  也可以给元素加上转换属性，实现滑动过渡的效果  
    ![在这里插入图片描述][20191104162510422.png]

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

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

## 多组件过渡 ##

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

## 列表过渡 ##

*  目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动画操作。  
    （1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部  
    ![在这里插入图片描述][20191104162821600.png]  
    （2）目前为止已经实现点击添加效果，如下所示  
    ![在这里插入图片描述][20191104163034582.png]
 *  之前的一些过渡动画效果都是针对单个元素组件的隐藏展示，或者多个元素组件来回切换的动画效果，接下来介绍下列表过渡效果，即列表增删改动数据时的过渡动画。
 *  列表过渡动画标签`<transition-group></transition-group>`
 *  （1）对于列表过渡需要用到列表过渡标签`transition-group`  
    ![在这里插入图片描述][20191104163121447.png]
 *  （2）定义CSS过渡效果  
    ![在这里插入图片描述][20191104163137838.png]  
    此时上图再次点击便实现了列表过渡切换效果

## 动画封装 ##

*  前言  
    如果部分效果在页面里应用较多，可以对其进行动画封装，以方便日后调用
 *  步骤：  
    （1）首先创建基础动画，即简单的显隐切换动画，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][20191104163330790.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]
 *  （2）封装动画组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]  
    **这里使用了props传值&&slot插槽**
 *  （3）调用组件  
    组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数  
    ![在这里插入图片描述][20191104163432475.png]
 *  目前为止已经实现了对动画的封装，可以任意次调用，如下所示  
    ![在这里插入图片描述][20191104163450415.png]
 *  （4）改良版—JS动画  
    动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。  
    即将如下的CSS动画代码也封装到组件里  
    ![在这里插入图片描述][20191104163514792.png]  
    （4）改良版—JS动画  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]  
    动画封装具体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>动画封装</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.demo {
    				width: 200px;
    				height: 200px;
    				background: red;
    			}
    
    			.demo1 {
    				width: 200px;
    				height: 200px;
    				background: green;
    			}
    
    			.fade-enter,
    			.fade-leave-to {
    				opacity: 0;
    			}
    
    			.fade-enter-active,
    			.fade-leave-active {
    				transition: opacity 2s;
    			}
    
    			.fade-enter-to,
    			.fade-leave {
    				opacity: 1;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="root">
    			<fade :status="status">
    				<div class="demo">我是展示内容1</div>
    			</fade>
    			<fade :status="status">
    				<div class="demo1">我是展示内容2</div>
    			</fade>
    			<button @click="handleClick">toggle</button>
    		</div>
    		<script type="text/javascript">
    			Vue.component('fade', {
    				props: {
    					status: Boolean
    				},
    				template: `
          <transition name="fade" model="out-in">
           <slot v-if="status"></slot>
          </transition>
         `
    			})
    			var root = new Vue({
    				el: '#root',
    				data: {
    					status: true
    				},
    				methods: {
    					handleClick() {
    						this.status = !this.status;
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104162011159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191104162023440.png]: https://img-blog.csdnimg.cn/20191104162023440.png
[20191104162107276.png]: https://img-blog.csdnimg.cn/20191104162107276.png
[20191104162224149.png]: https://img-blog.csdnimg.cn/20191104162224149.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104162346475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104162352441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191104162446342.png]: https://img-blog.csdnimg.cn/20191104162446342.png
[20191104162510422.png]: https://img-blog.csdnimg.cn/20191104162510422.png
[20191104162553392.png]: https://img-blog.csdnimg.cn/20191104162553392.png
[20191104162605997.png]: https://img-blog.csdnimg.cn/20191104162605997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104162630299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104162653466.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/201911041627108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191104162730468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191104162821600.png]: https://img-blog.csdnimg.cn/20191104162821600.png
[20191104163034582.png]: https://img-blog.csdnimg.cn/20191104163034582.png
[20191104163121447.png]: https://img-blog.csdnimg.cn/20191104163121447.png
[20191104163137838.png]: https://img-blog.csdnimg.cn/20191104163137838.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191104163257784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191104163330790.png]: https://img-blog.csdnimg.cn/20191104163330790.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191104163342520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191104163406923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191104163432475.png]: https://img-blog.csdnimg.cn/20191104163432475.png
[20191104163450415.png]: https://img-blog.csdnimg.cn/20191104163450415.png
[20191104163514792.png]: https://img-blog.csdnimg.cn/20191104163514792.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191104163540488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70