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

最新推荐文章于 2022-09-06 10:29:26 发布

裴嘉靖

最新推荐文章于 2022-09-06 10:29:26 发布

阅读量888

点赞数

分类专栏：动画 Vue 日报文章标签：封装动画

本文链接：https://blog.csdn.net/peijiajing/article/details/102898701

版权

日报同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

Vue

44 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

课程大纲

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

多元素过渡

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

多元素过渡-案例练习

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

多元素过渡-过渡模式

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

②out-in：当前元素先进行过渡，完成之后新元素过渡进入

多组件过渡

【多组件过渡】
接下来介绍下多组件实现过渡效果，代码如下，直接将多元素修改为多组件即可
多组件过渡也可以结合动态组件进行操作，首先写个基础动态组件案例，如下所示
接下来添加transition过渡

列表过渡

目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动画操作。
（1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部

（2）目前为止已经实现点击添加效果，如下所示
之前的一些过渡动画效果都是针对单个元素组件的隐藏展示，或者多个元素组件来回切换的动画效果，接下来介绍下列表过渡效果，即列表增删改动数据时的过渡动画。
列表过渡动画标签<transition-group></transition-group>
（1）对于列表过渡需要用到列表过渡标签transition-group
（2）定义CSS过渡效果

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

动画封装

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

这里使用了props传值&&slot插槽
（3）调用组件
组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数
目前为止已经实现了对动画的封装，可以任意次调用，如下所示
（4）改良版—JS动画
动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。
即将如下的CSS动画代码也封装到组件里

（4）改良版—JS动画

动画封装具体代码如下：

<!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>

裴嘉靖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue之多元素组件过渡+动画封装

课程大纲（1）多元素过渡（2）多组件过渡（3）列表过渡（4）动画封装多元素过渡首先介绍下如何实现多元素过渡（1）利用条件编译指令v-if与v-else实现多元素内容切换.（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态（3）状态管理测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中...
复制链接

扫一扫