前端Jeek

Vue使用Animate动画库

2019/7/18 JSVue

🌙 1. Demo1 (opens new window)：使用Vue组件transition并自定义简单动画

  • 1.创建Vue实例
const vm = new Vue({
	data: {
		msg: '赤橙黄绿青蓝紫',
		flag: true,
	},
	methods: {
		// 定义动画生命周期钩子对应执行函数
		beforeEnter(el) {
			console.log('动画进入之前！');
			this.msg = "赤";
			el.style.background = 'red';
		},
		enter(el) {
			console.log('动画进入！');
			this.msg = "橙";
			el.style.background = 'orange';
		},
		afterEnter(el) {
			console.log('动画进入之后！');
			this.msg = "黄";
			el.style.background = 'yellow';
		},
		beforeLeave(el) {
			console.log('动画离开之前！');
			this.msg = "绿";
			el.style.background = 'green';
		},
		leave(el) {
			console.log('动画离开！');
			this.msg = "青";
			el.style.background = 'cyan';
		},
		afterLeave(el) {
			console.log('动画离开之后！');
			this.msg = "蓝";
			el.style.background = 'blue';
}
	}
}).$mount('#app');
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

🌙 2.在html中将需要加动画的元素放在transiton标签中,并且给该标签定义一个name属性

<div id="app" class="container text-center">
	<button @click="flag=!flag" class="btn btn-warning">展示动画效果</button>

	<!-- 	transition生命周期钩子 -->
	<transition name="v"
							@before-enter="beforeEnter" 
							@enter="enter" 
							@after-enter="afterEnter" 
							@before-leave="beforeLeave" 
							@leave="leave" 
							@after-leave="afterLeave">
		<!-- <transition>标签有name属性，在设置css时，要加上'.name属性值-。。。' -->
		<!-- 必须将需要动画操作的元素放在<transiton>标签里面 -->
		<p v-show="flag" class="h3 text-muted">{{msg}}</p>
	</transition>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 3.定义CSS动画，使用特殊的类名
/* 定义动画：.name属性-。。。*/
.v-enter-active,
.v-leave-active {
	transition: all 3s ease;
}

.v-enter-active {
	opacity: 1;
	width: 200px;
	height: 200px;
}

.v-leave-active {
	opacity: .5;
	width: 50px;
	height: 50px;
}

/* .-enter需要放在.-enter-active的后面 */
.v-enter {
	opacity: .5;
	width: 50px;
	height: 50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

查看代码效果：Demo1 (opens new window)

这里的v-...中的v即<transition name="v"里面的name属性值。

Learn More： 官方：Vue内置组件-transition (opens new window) 官方：进入/离开 & 列表过渡 (opens new window)

🌙 2. Demo2 (opens new window)：使用Vue组件transition并结合第三方库Animate.css (opens new window)

Demo2

 npm install animate.css --save
// 或者：
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
1
2
3
4
5
  • 在html中使用
<div class="animation" v-for="(value, index) in animations">
		<div class="wrap"> 
<!-- 			div.wrap使这一块区域形成BFC，与其他区域互不影响。 -->
			<transition :enter-active-class="'animated delay-1s ' + value" :leave-active-class="'animated ' + value">
			<p v-show="flags[index].show" :style="{background: colors[index % colors.length]}" @mouseenter="enter(index)" @mouseout="out(index)" :title="value">{{value}}</p>
		</transition>
	</div>
1
2
3
4
5
6
7

查看代码及效果： Demo2 (opens new window)

🌙 3.遇到的坑

  • 1.在Vue中，使用v-show绑定数组中的value，修改数组的值之后，页面并不会实时渲染。 解决方式： 1.将数组值存在数组对象中（Demo2使用此方式解决） 2.使用Vue.$set方法。

问题原因详细解释：

  1. vue中遇到的坑 --- 变化检测问题（数组相关） (opens new window)

  2. 官方解释:深入响应式原理

解决方式：

  • 1.win + R
  • 2.Enter: %windir%\system32\SystemPropertiesPerformance.exe
  • 3.选中第一行,确认 让Windows选择计算机的最佳设置 （Let Windows choose what's best for my computer）

Vue Nuxt SSR