vue的动画与过渡-trasition-enter-leave

vue动画的理解

1. 操作css的trasition或animation
2. vue会给目标元素添加/移除特定的class

基本过渡动画的编码

在目标元素外包裹 <transition></transition>
<transition></transition> —该标签仅仅可以使用在一个单独标签上
定义class样式
1）. 指定过渡样式: transition
2）· 指定隐藏时的样式: opacity/其它

1. 过渡的类名
   xxx-enter-active: 指定显示的transition //进入的动画
   xxx-leave-active: 指定隐藏的transition //离开的动画
   xxx-enter: 指定显示时的样式 //进入的过渡
   xxx-leave：指定隐藏的样式//离开的过度
   （xxx表示的transition的name属性的名称）

动画实现显示与隐藏：

目标元素（需要加动画效果的元素）：

<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<!--appear 是让动画先执行一次-->
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>

css样式：

   h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}

过度实现显示与隐藏：

目标元素（需要加过度的元素）：

<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
		</transition>
	</div>

css样式：

h1{
	background-color: orange;
	/*谁要过渡给谁加*/
	/*transition: 0.5s linear;*/ 
}
/* 进入的起点、离开的终点 */
.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);
}

多个元素添加动画效果

目标元素（需要被添加过渡效果的元素）：

<div>
	<button @click="isShow = !isShow">显示/隐藏</button>
	<transition-group name="hello" appear>
		<h1 v-show="!isShow" key="1">你好啊！</h1>
		<h1 v-show="isShow" key="2">尚硅谷！</h1>
	</transition-group>
</div>

css样式：

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);
	}

集成第三方动画 (animate.css)

链接：https://animate.style/
第一步：Install with npm:

npm install animate.css --save

第二步：引入

import animate.css

第三步：

<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			/*必须引入的*/
			name="animate__animated animate__bounce" 
			/*enter-active-class、leave-active-class 配置项*/
			/*animate__swing 第三方库生成的动画*/
			enter-active-class="animate__swing" 
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>

总结

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

2.写法：

1).准备好样式：

元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用包裹要过度的元素，并配置name属性：

<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
//备注：若有多个元素需要过渡，则需要使用：<transition-group>，且每个元素都要指定key值。