js脚本测试动画

发表于 | 分类于

前言

在使用css来给页面添加动画时，如果样式和动画一起写，很容易出错，最后可能在整体上达不到预期的效果，修修改改很费时，可以先写一个js脚本来测试动画效果，再去一次性写好所有动画。

测试过程

这里举一个小例子，来看看怎么先测试动画效果。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="screen1" style="background-color: #FFFF00;">
	<h2 style="color: red;">这是第一屏</h2>

	<p class="screen1_p1">第一段文字</p>
	<p class="screen1_p2">第二段文字</p>
	<p class="screen1_p3">第三段文字</p>
</div>

<hr>

<div class="screen2" style="background-color: #BDB76B;">
	<h2 style="color: red;">这是第二屏</h2>

	<p class="screen2_p1">第一段文字</p>
	<p class="screen2_p2">第二段文字</p>
	<p class="screen2_p3">第三段文字</p>
</div>

两个div代表两个屏，分别有不同的动画

CSS

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
/*第一屏*/
.screen1_p1,.screen1_p2,.screen1_p3{
	transition: all 1s;
}

.screen1_p1_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen1_p2_animate_init{
	opacity: 0;
	transform: translate(-100%,0);
}
.screen1_p3_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}

.screen1_p1_animate_done,
.screen1_p2_animate_done,
.screen1_p3_animate_done{
	opacity: 1;
	transform: translate(0,0);
}

/*第二屏*/
.screen2_p1,.screen2_p2,.screen2_p3{
	transition: all 1s;
}

.screen2_p1_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen2_p2_animate_init{
	opacity: 0;
	transform: translate(100%,0);
}
.screen2_p3_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}

.screen2_p1_animate_done,
.screen2_p2_animate_done,
.screen2_p3_animate_done{
	opacity: 1;
	transform: translate(0,0);
}

给每个需要动画的元素写好控制动画的class，init表示初始化样式，done表示最终展示样式，通过js来切换init状态还是done状态，就可以看到动画展现过程。接下来就写js部分。

JavaScript

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//所有有动画的元素
var screenAnimateElements = {
	'.screen1':[
		'.screen1_p1',
		'.screen1_p2',
		'.screen1_p3'
	],

	'.screen2':[
		'.screen2_p1',
		'.screen2_p2',
		'.screen2_p3'
	]			
}

//封装动画函数
var setAnimate = function(cls) {
	var screen = document.querySelector(cls); //获取当前屏
	var animateElements = screenAnimateElements[cls];  //需要设置动画的元素
	var isSetAnimateClass = false; //是否有初始化子元素的样式
	var isAnimateDone = false; //当前屏幕下所有子元素的状态是否是done

	//点击当前屏，测试动画
	screen.onclick = function() {

		//初始化样式，增加init
		if (isSetAnimateClass === false) {
			for(var i=0;i<animateElements.length;i++) {
				var element = document.querySelector(animateElements[i]);
				var baseCls = element.getAttribute('class');

				element.setAttribute('class', baseCls + ' ' + animateElements[i].substr(1)+'_animate_init');
			}
			isSetAnimateClass = true;
			return;
		}

		//切换所有 animateElements 的 init -> done
		if (isAnimateDone === false) {
			for(var i=0;i<animateElements.length;i++) {
				var element = document.querySelector(animateElements[i]);
				var baseCls = element.getAttribute('class');

				element.setAttribute('class', baseCls.replace('_animate_init','_animate_done'));
			}
			isAnimateDone = true;
			return;
		}


		//切换所有 animateElements 的 done -> init
		if (isAnimateDone === true) {
			for(var i=0;i<animateElements.length;i++) {
				var element = document.querySelector(animateElements[i]);
				var baseCls = element.getAttribute('class');

				element.setAttribute('class', baseCls.replace('_animate_done','_animate_init'));
			}
			isAnimateDone = false;
			return;
		}
	}
	
}


//循环所有需要动画的元素 加上动画
for(var k in screenAnimateElements) {
	setAnimate(k);
}

此时就可以单独点击各屏，切换init和done状态，来查看动画展现效果。