Vue（十四）过渡（动画）

过渡(动画)

1. 简介

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

本质上还是使用CSS3动画：transition、animation

2. 基本用法

使用transition组件，将要执行动画的元素包含在该组件内

运动的元素

</transition>

过滤的CSS类名：6个

3. 钩子函数

8个

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter"

@before-leave="beforeLeave"

@leave="leave"

@after-leave="afterLeave"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>vue</title>
	<script src="https://unpkg.com/vue"></script>
	<style>
		
		p{
			 300px;
			height: 300px;
			background-color:red;
		}
		.fade-enter-active,.fade-leave-active{
			transition:all 3s ease;
		}
		.fade-enter-active{
			opacity:1;
			300px;
			height:300px;
		}
		.fade-leave-active{
			opacity:0;
			50px;
			height:50px;
		}
		/* .fade-enter需要放在.fade-enter-active的后面 */
		.fade-enter{
			opacity:0;
			 100px;
			height: 100px;
		}

	</style>

</head>

<body>

	<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition name="fade" 
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
			@before-leave="beforeLeave"
			@leave="leave"
			@after-leave="afterLeave"
		>
			<p v-show="flag">网博</p>
		</transition>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			},
			methods:{
				beforeEnter(el){
					// alert('动画进入之前');
				},
				enter(){
					// alert('动画进入');
				},
				afterEnter(el){
					// alert('动画进入之后');
					el.style.background='blue';
				},
				beforeLeave(){
					// alert('动画即将之前');
				},
				leave(){
					// alert('动画离开');
				},
				afterLeave(el){
					// alert('动画离开之后');
					el.style.background='red';
				}
			}
		});
	</script>
	
</body>

</html>

4. 结合第三方动画库animate..css一起使用（https://daneden.github.io/animate.css/）

</transition>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>vue</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="https://unpkg.com/vue"></script>
	<script>

		window.onload = function(){

			var vm = new Vue({
				el:'#app',
				data:{
					flag:false
				}
			})

		}

	</script>

	<style>
		p{
			 300px;
			height: 300px;
			background-color: red;
			margin:0 auto;
		}
	</style>

</head>

<body>

    <div id="app">
		<button @click="flag=!flag">点我</button>
	
		<transition enter-active-class="animated rollIn" leave-active-class="animated rollOut">
			<p v-show="flag">网博</p>
		</transition>
    </div>

</body>

</html>

5. 多元素动画

<transition-group>

		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutLeft">
			<p v-show="flag" :key="1">你好</p>
			<p v-show="flag" :key="2">世界</p>
		</transition-group>

6. 练习

多元素动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>vue</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="https://unpkg.com/vue"></script>
	<script>

		window.onload = function(){

			var vm = new Vue({
				el:'#app',
				data:{
					flag:true,
					arr:['tom','jack','mike','alice','alex','mark'],
					name:''
				},
				/* 计算属性 */
				computed:{
					arr2:function(){
						var temp=[];
						this.arr.forEach(val => {
							if(val.includes(this.name)){
								temp.push(val);
							}
						});
						return temp;
					}
				}
			})

		}

	</script>

	<style>
		p{
			 50px;
			height: 50px;
			background-color: red;
			margin:0 auto;
		}
	</style>

</head>

<body>

    <div id="app">
		<input type="text" v-model="name">
		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<p v-for="(v,k) in arr2" :key="k">
					{{v}}
				</p>
		</transition-group>
    </div>

</body>

</html>