26.Vue中使用Animate.css库

发表于 分类于 ， 阅读次数： 本文字数： 2.5k 阅读时长 ≈ 2 分钟
引言：

Animate.css库的使用

如何使用

  1. 去官网下载Animate的库文件
    Animate官网

  2. 引包

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<script src="./js/vue.js"></script>
	<link rel="stylesheet" href="js/animate.css">
</head>
<body>
	<div id="root">
		<transition 
		name='fade'
		enter-active-class='animated swing'
		leave-active-class='animated shake'
		>
			<div v-if="show">你好</div>
		</transition>

		<button @click="handleClick">切换</button>
	</div>

	<script>
		let vm = new Vue({
			el:'#root',
			data:{
				show: true
			},
			methods:{
				handleClick(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>
</html>

首次加载即有动画

加两个类名

  • appear
  • appear-active-class
1
2
3
4
5
6
7
8
9
<transition 
name='fade'
appear
enter-active-class='animated swing'
leave-active-class='animated shake'
appear-active-class='animated swing'
>
	<div v-if="show">你好</div>
</transition>

如何同时使用过渡和动画

1
2
3
4
5
6
7
8
9
<transition 
		name='fade'
		appear
		enter-active-class='animated swing fade-enter-active'
		leave-active-class='animated shake fade-leave-active'
		appear-active-class='animated swing'
		>
			<div v-if="show">你好</div>
		</transition>

在动画的名后加上对应的过渡动画名即可，过渡动画要自己设置

怎么解决过渡与动画时间不统一

加一个type或者duration即可

type:

1
2
3
4
5
6
7
8
9
10
<transition
		type="transition"
		name='fade'
		appear
		enter-active-class='animated swing fade-enter-active'
		leave-active-class='animated shake fade-leave-active'
		appear-active-class='animated swing'
		>
			<div v-if="show">你好</div>
		</transition>

duration:
单位是ms

1
2
3
4
5
6
7
8
9
10
<transition
		:duration='5000'
		name='fade'
		appear
		enter-active-class='animated swing fade-enter-active'
		leave-active-class='animated shake fade-leave-active'
		appear-active-class='animated swing'
		>
			<div v-if="show">你好</div>
		</transition>

甚至可以添加起止时间

1
2
3
4
5
6
7
8
9
10
<transition
		:duration='{enter: 5000,leave:5000}'
		name='fade'
		appear
		enter-active-class='animated swing fade-enter-active'
		leave-active-class='animated shake fade-leave-active'
		appear-active-class='animated swing'
		>
			<div v-if="show">你好</div>
		</transition>