Vue之过度与动画

最新推荐文章于 2021-03-28 23:23:23 发布

尧~

最新推荐文章于 2021-03-28 23:23:23 发布

阅读量252

点赞数 1

本文链接：https://blog.csdn.net/weixin_44775723/article/details/98982356

版权

本文详细介绍了Vue中的过渡和动画，包括无名和有名过渡的类名切换，v-enter和v-leave类的应用，过渡切换原理，CSS过渡与动画的区别，以及多元素过渡的两种模式in-out和out-in，提供了丰富的案例分析。

摘要由CSDN通过智能技术生成

一、过渡

（1）过渡名
对于这些在过渡中切换的类名来说分两种：
一种是没有name名字，另一种是有name（推荐）

①如果使用一个没有名字的，则 v- 是这些类名的默认前缀。

②如果使用了，那么 v-enter 会替换为 my-transition-enter。

推荐：因为一个页面里，会存在多个过渡，所以通常给过渡中切换的类名加上名字name。

（2）v-leave（移除）类------没有过度名时：

案例一

<style>
	/*①离开过渡的开始状态*/
			.v-leave{
				opacity: 1;
			}
	/*②离开过渡生效时的状态*/
			.v-leave-active{
				transition:opacity 2s;
			}
	/*③ 2.1.8版及以上，定义离开过渡的结束状态  */
			.v-leave-to{
				opacity: 0;
			}
</style>

<div class="demo2">
	<button @click='box2A=false'>隐藏</button>
	<transition>
		<div class="box2" v-show='box2A'></div>
	</transition>
</div>
<script>
	new Vue({
		el:'.demo2',
		data:{
			box2A:true
		}
	})
</script>

（3）v-enter（插入）类------没有过度名时：

案例二

<style>
	.v-enter{
			opacity: 0;
		}
	.v-enter-active{
		transition:opacity 2s;
	}
	.v-enter-to{
		opacity: 1;
	}
</style>

<div class="demo2">
	<button @click='box2A=true'>出现</button>
	<transition>
		<div class="box2" v-show='box2A'></div>
	</transition>
</div>
<script>
	new Vue({
		el:'.demo2',
		data:{
			box2A:false
		}
	})
</script>

（4）过度切换---------有过渡名时
案例三

<style>
		.area-leave,
		.area-enter-to{
				opacity: 1;
		}
		.area-leave-active,
		.area-enter-active{
				transition:opacity 2s;
		}
		.area-leave-to,
		.area-enter{
				opacity: 0;
		}
</style>

<div class="demo2">
	<button @click='box2A=!box2A'>切换</button>
	<transition name='area'>
		<div class="box2" v-show='box2A'></div>
	</transition>
</div>
<script>
	new Vue({
		el:'.demo2',
		data:{
			box2A:true
		}
	})
</script>

（5）单元素过渡原理
原理分析：

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

①自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
②如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当时机被调用。
③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

二、动画

**
（1）
CSS 动画与CSS 过渡用法类似，区别在于：

①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除。

②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

案例一 CSS 动画典型案例：跳跃隐藏动画

<style>
	.area1-leave-active{
		animation: area1 .5s linear;
		}
	@keyframes area1{
		0%{transform:scale(1);}
		25%{transform:scale(0.8);}
		75%{transform:scale(0.5);}
		100%{transform:scale(0.2);}
	}
</style>

<div class="demo3">
	<button @click='box3A=!box3A'>跳跃隐藏动画</button>
	<transition name='area1'>
		<div class="box3" v-show='box3A' ></div>
	</transition>
</div>
<script>
	new Vue({
		el:'.demo3',
		data:{
			box3A:true
		}
	})
</script>

案例二 CSS 动画典型案例：跳跃显示动画

<style>
		.area2-enter-active{
				animation:area2 .5s linear;
		}
		@keyframes area2{
			0%{transform: scale(0.2);}
			25%{transform:scale(0.5);}
			75%{transform:scale(0.8);}
			100%{transform: scale(1);}
		}

<style>

<div class="demo4">
	<button @click='box4A=!box4A'>跳跃显示动画</button>
	<transition name='area2'>
		<div class="box4" v-show='box4A' ></div>
	</transition>
</div>
<script>
	new Vue({
		el:'.demo4',
		data:{
			box4A:false
		}
	})
</script>

三、多元素过渡

**
多元素过渡可以通过v-if条件指令进行控制

<style>
		.demo5{
				width: 400px;
				height:400px;
			}
		.all_area{
			position: absolute; 
			width: 100px;
			height: 100px;
			left: 300px;
			background: red;
			text-align: center;
			line-height: 100px;	
		}
		
		.all-leave-active,
		.all-enter{
			opacity: 0;
		}
		.all-leave-active,
		.all-enter-active{
			transition:all 1s; 
		}
	/*给元素加上转换属性，实现滑动过渡的效果*/
		.all-enter{
			transform: translateX(100px);
		}
		.all-leave-active{
			transform: translateX(-100px);
		}
</style>

		<div class="demo5">
			<button @click='num++'>切换</button>
			<transition name='all' mode='in-out'>
<!--多元素过渡可以通过v-if条件指令进行控制-->
				<div class="all_area" v-if='num==1' :key='num'>区域一</div>
				<div class="all_area" v-else-if='num==2' :key='num' >区域二</div>
				<div class="all_area" v-else-if='num==3' :key='num' >区域三</div>
				<div class="all_area" v-else='num'  :key='num' >默认区域</div>
			</transition>
		</div>
		<script>
			new Vue({
				el:'.demo5',
				data:{
					num:1
				}
			})
		</script>

同时生效的进入和离开的过渡不能满足所有要求。
所以 Vue 提供了两种过渡模式：

①in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）

<transition name='all' mode='in-out'>

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

<transition name='all' mode='out-in'>

多组件过渡语法与单组件类似

案例（注意注释）

<style>
			.app{
				width: 800px;
				height: 500px;
				margin:20px auto;
				border: 2px solid #ccc;
			}
			.app>ul{
				width: inherit;
				height: 50px;
				background: rgba(0,0,0,.4);
			}
			.app>ul li{
				width: 20%;
				height: 50px;
				float: left;
				text-align: center;
				line-height: 50px;
				list-style: none;
				cursor: pointer;
			}
			.name_se{
				background: rgba(0,0,0,.7);
				color: #fff;
			}
			.app>ul+div{
				width: inherit;
				height:450px;
				padding:10px;
				background:paleturquoise;
				box-sizing: border-box;
			}
	/*给元素加上转换属性，实现过渡的效果*/
			.component_fade-enter,
			.component_fade-leave-active{
				opacity: 0;
			}
			.component_fade-enter-active,
			.component_fade-leave-active{
				transition: opacity 1s linear;
			}

</style>

<body>
		<div class="app">
			<ul>
				<li v-for='book of books'  @click='name_big=book' :class="[name_big==book?'name_se':'']">{{book}}</li>
			</ul>
	<!--给transition添加过渡名  -->
			<transition name='component_fade'>
	<!--组件在:is='name_big'中的name_big发生改变时变化-->
				<component :is='name_big' ></component>
			</transition>
		</div>
		<script>
			Vue.component('home',{
				template:`<div>公司首页</div>`
			})
			Vue.component('JS',{
				template:`<div>公司介绍</div>`
			})
			Vue.component('DZ',{
				template:`<div>公司地址</div>`
			})
			Vue.component('HJ',{
				template:`<div>公司环境</div>`
			})
			Vue.component('YJ',{
				template:`<div>公司意见</div>`
			})
			var app = new Vue({
				el:'.app',
				data:{
					name_big:'home',
					books:['home','JS','DZ','HJ','YJ']
				}
			})
		</script>

</body>