Vue —— 进阶脚手架（六）（过渡与动画）

---

Vue 封装的过渡和动画

1. 作用

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

2. 图示

3. 准备好样式

元素进入的样式

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

元素离开的样式

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

4. 包裹要过渡的元素

使用 transition 包裹要过渡的元素，并配置 name 属性

	<transition name='hello'>
		<h3 v-show='isShow'>Hello</h3>
	</transition>
1
2
3

注意：若有多个元素需要过渡，则需要使用 <transition-group>，且每个元素都要指定 key 值。

实例：动画效果实现动画

先在 @keyframes xxx {} 中准备好动画效果，再包裹要动画的元素。

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition appear>
	      <h3 v-show="isShow">Hello~</h3>
	    </transition>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  background-color: orange;
	}
	.v-enter-active {
	  animation: demo 0.5s linear;
	}
	.v-leave-active {
	  animation: demo 0.5s linear reverse;
	}
	@keyframes demo {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

实例：过渡效果实现动画

实现相同的效果

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition-group name='hello' appear>
	      <h3 v-show="!isShow" key="1">Hello~</h3>
	      <h3 v-show="isShow" key="2">Vue~</h3>
	    </transition-group>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  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);
	}
	
	@keyframes atguigu {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

实例：引入第三方库实现动画

1. 第三方库 | 链接地址
2. 在终端键入 $ npm install animate.css 命令
3. 按要求选择配置

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition-group 
	    appear
	    name="animate__animated animate__bounce" 
	    enter-active-class="animate__swing"
	    leave-active-class="animate__backOutUp"
	    >
	      <h3 v-show="!isShow" key="1">Hello~</h3>
	      <h3 v-show="isShow" key="2">Vue~</h3>
	    </transition-group>
	  </div>
	</template>
	
	<script>
	import "animate.css";
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  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);
	}
	
	@keyframes atguigu {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

不积跬步无以至千里 不积小流无以成江海