vue2-过渡动画

1.通过transition+类名实现过渡动画

(1)过渡动画基本使用

将需要执行动画的元素放到transition组件中。
当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名。
当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名。

	<transition>
		<div class="box" v-show="isShow"></div>
	</transition>
	
	.box{
		width: 200px;
		height: 200px;
		background: red;
	}
	.v-enter{
		opacity: 0;
	}
	.v-enter-to{
		opacity: 1;
	}
	.v-enter-active{
		transition: all 3s;
	}
	.v-leave{
		opacity: 1;
	}
	.v-leave-to{
		opacity: 0;
	}
	.v-leave-active{
		transition: all 3s;
	}

(2)注意点：

transition中只能放一个元素, 多个元素无效。
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件。
通过transition+类名的方式确实能够实现过渡效果，但是实现的过渡效果并不能保存动画之后的状态，因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名，正是因为删除了类名, 所以不能保存最终的效果。

(3)初始动画设置

默认情况下第一次进入的时候没有动画的，如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式，告诉Vue第一次进入就需要显示动画。

(4)如何给多个不同的元素指定不同的动画（自定义类名前缀）

如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式，来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名，来实现不同的元素执行不同的过渡动画。

	<transition appear name="one">
		<div class="box" v-show="isShow"></div>
	</transition>
	<transition appear name="two">
		<div class="box" v-show="isShow"></div>
	</transition>
	
	.box {
		width: 200px;
		height: 200px;
		background: red;
	}
	
	.one-enter {
		opacity: 0;
	}
	.one-enter-to {
		opacity: 1;
		margin-left: 500px;
	}
	.one-enter-active {
		transition: all 3s;
	}
	.two-enter {
		opacity: 0;
	}
	.two-enter-to {
		opacity: 1;
		margin-top: 500px;
	}
	.two-enter-active {
		transition: all 3s;
	}

(5)自定义动画类名（指定过渡动画）

enter-class： 进入动画开始之前
enter-active-class： 进入动画执行过程中
enter-to-class： 进入动画执行完毕之后
leave-class:：离开动画开始之前
leave-active-class： 离开动画执行过程中
leave-to-class： 离开动画执行完毕之后
示例：

<transition appear enter-class="a" enter-active-class="c"
enter-to-class="b">
	<div class="box" v-show="isShow"></div>
</transition>

.box{
	width: 200px;
	height: 200px;
	background: red;
}
.a{
	opacity: 0;
}
.b{
	opacity: 1;
	margin-left: 500px;
}
.c{
	transition: all 3s;
}

2.通过JS钩子实现过渡动画

(1)通过Vue提供的JS钩子来实现过渡动画，能保存过渡最终的效果。

v-on:before-enter=“beforeEnter” 进入动画之前
v-on:enter=“enter” 进入动画执行过程中
v-on:after-enter=“afterEnter” 进入动画完成之后
v-on:enter-cancelled=“enterCancelled” 进入动画被取消

v-on:before-leave=“beforeLeave” 离开动画之前
v-on:leave=“leave” 离开动画执行过程中
v-on:after-leave=“afterLeave” 离开动画完成之后
v-on:leave-cancelled=“leaveCancelled” 离开动画被取消

(2)注意点：

在动画过程中必须写上el.offsetWidth或者el.offsetHeight。
在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行。
需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用。
虽然我们是通过JS钩子函数来实现过渡动画，但是默认Vue还是回去查找类名, 所以为了不让Vue去查找类名，可以给transition添加v-bind:css=“false”。

(3)实例：

	<transition appear
		v-bind:css="false"
		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:after-enter="afterEnter">
		<div class="box" v-show="isShow"></div>
	</transition>
	methods: {
		toggle(){
			this.isShow = !this.isShow;
		},
		beforeEnter(el){
			// 进入动画开始之前
			console.log("beforeEnter");
			el.style.opacity = "0";
		},
		enter(el, done){
			// 进入动画执行过程中
			console.log("enter");
			/*
			注意点: 如果是通过JS钩子来实现过渡动画
			那么必须在动画执行过程中的回调函数中写上
			el.offsetWidth / el.offsetHeight
			* */
			// el.offsetWidth;
			el.offsetHeight;
			el.style.transition = "all 3s";
			/*
			注意点: 动画执行完毕之后一定要调用done回调函数
			否则后续的afterEnter钩子函数不会被执行
			* */
			// done();
			/*
			注意点: 如果想让元素一进来就有动画, 那么最好延迟以下再调用done方法
			* */
			setTimeout(function () {
				done();
			}, 0);
		},
		afterEnter(el){
			// 进入动画执行完毕之后
			console.log("afterEnter");
			el.style.opacity = "1";
			el.style.marginLeft = "500px";
		}
	}

3.transition-group

(1)如何同时给多个元素添加过渡动画：

通过transition可以给单个元素添加过渡动画
如果想给多个元素添加过渡动画, 那么就必须通过transition-group来添加。
transition-group和transition的用法一致, 只是一个是给单个元素添加动画, 一个是给多个元素添加动画而已。

(2)示例：

	<transition-group appear>
		<li v-for="(person,index) in persons" :key="person.id" 
			@click="del(index)">
			<input type="checkbox">
			<span>{{index}} --- {{person.name}}</span>
		</li>
	</transition-group>
	data: {
		persons: [
		{name: "zs", id: 1},
		{name: "ls", id: 2},
		{name: "ww", id: 3}
		],
		name: ""
	}

(3)注意点

默认情况下transition-group会将动画的元素放到span标签中，我们可以通过tag属性来指定将动画元素放到什么标签中。
一般情况下组动画出现动画混乱都是因为v-for就地复用导致的，我们只需要保证所有数据key永远是唯一的即可。

4.配合Velocity实现过渡动画

(1)实现过程

导入Velocity库
在动画执行过程钩子函数中编写Velocity动画

(2)示例

	<transition appear
		v-bind:css="false"
		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:after-enter="afterEnter">
		<div class="box" v-show="isShow"></div>
	</transition>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/
	velocity.min.js"></script>
	
	methods: {
		toggle(){
			this.isShow = !this.isShow;
		},
		beforeEnter(el){},
		enter(el, done){
			Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000);
			done();
		},
		afterEnter(el){}
	}

5.配合Animate.css实现过渡动画

(1)格式

导入Animate.css库
在执行过程中的属性上绑定需要的类名

(2)实例：

	<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 
	rel="stylesheet" type="text/css">
	
	<transition appear enter-class=""
	enter-active-class="animated bounceInRight" enter-to-class="">
		<div class="box" v-show="isShow"></div>
	</transition>