Vue封装的过渡与动画

1、作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2、图示： 下图中左边是进入的过程，右边是离开的过程

3、写法： （1）准备好样式：

• 元素进入的样式：

1、v-enter：进入的起点
2、v-enter-active：进入的过程
3、v-enter-to：进入的终点

• 元素离开的样式：

1、v-leave：离开的起点
2、v-leave-active：离开过程中
3、v-leave-to：离开的终点

（2）使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

（3）备注：若有多个元素需要过渡，则使用：<transition-group>，并且每个元素都要指定key的值

案例一：（动画效果）

1、需求：点击按钮，实现标签显示或隐藏的效果；

2、实现：

Test.vue

<template>
	<div>
		<button @click="isShow = !isShow" >显示/隐藏</button>
		<!-- transition内包裹的是需要出现动画效果的标签 -->
		<!-- name是动画效果样式名称，appear能够使刚刚进入页面就产生动画效果 -->
		<transition name="hello" :appear="true"><!-- 底下已经定义好vue的动画效果了 -->
			<h1 v-show="isShow" >你好啊!</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data(){
			return {
				isShow:true
			}
		},
	}
</script>
    
<style scoped>
    h1 {
		background-color: orange;
	}
	
	.hello-enter-active{ /* vue的动画效果标签 */
		animation: atguigu 1s;
	}
	
	.hello-leave-active{
		animation: atguigu 1s reverse;
	}
	
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

3、效果：

案例二：（过渡效果）

1、需求：两个h1标签有不同的过渡效果；一个显示另一个隐藏；

2、实现：

Test2.vue

<template>
	<div>
		<button @click="isShow = !isShow" >显示/隐藏</button>
		<!-- 加上transition-group能使用多个标签，但必须加上id -->
		<transition-group name="hello" :appear="true"><!-- 地下已经定义好vue的动画效果了 -->
			<h1 v-show="!isShow" key="1">你好啊!</h1>
			<h1 v-show="isShow" key="2">尚硅谷</h1>
		</transition-group>
	</div>
</template>

<script>
	//用过渡效果来实现Test中的内容
	export default {
		name:'Test',
		data(){
			return {
				isShow:true
			}
		},
	}
</script>
    
<style scoped>
    h1 {
		background-color: orange;
	}
	/*进入的起点，离开的终点*/
	.hello-enter,.hello-leave-to {
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/*进入的终点，离开的起点*/
	.hello-enter-to,.hello-leave {
		transform: translateX(0);
	}
</style>

3、效果：

案例三：（集成第三方动画）

1、需求：使用animate.css库的动画效果进行切换

2、实现：

（1）在终端中安装animate.css库，使用命令：

npm install animate.css

（2）代码实现：

Test3.vue

<template>
	<div>
		<button @click="isShow = !isShow" >显示/隐藏</button>
		<!-- 加上transition-group能使用多个标签，但必须加上id -->
		<transition-group 
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
			:appear="true"
		><!-- 地下已经定义好vue的动画效果了 -->
			<h1 v-show="!isShow" key="1">你好啊!</h1>
			<h1 v-show="isShow" key="2">尚硅谷</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data(){
			return {
				isShow:true
			}
		},
	}
</script>
    
<style scoped>
    h1 {
		background-color: orange;
	}
	/*进入的起点，离开的终点*/
	.hello-enter,.hello-leave-to {
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/*进入的终点，离开的起点*/
	.hello-enter-to,.hello-leave {
		transform: translateX(0);
	}
</style>

3、效果：