animate/index.html at master · PitPik/animate · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="animate.js"></script>
	<style type="text/css">
		.animate {
			width: 200px;
			height: 200px;
			border: 1px solid #999;
			cursor: pointer;
			text-align: center;
			line-height: 200px;
			opacity: .3;
		}
	</style>
	<title>Animation Demo</title>
</head>
<body>
	<div class="animate">Click me!</div>
	<script type="text/javascript">
		const anim = new Animate({ speed: 1 }); // could be param of anim()
		const elm = document.querySelector('.animate');

		var anim_2 = function(elm) {
			return anim.queue(elm,
				'position: absolute;' +
				'left: 100px => 0px;' +
				'top: 200px => 0px;' +
				'opacity: 1 -> .3;' +
				'transform: rotate(0deg => 360deg)'
			);
		};

		var anim_1 = elm.addEventListener('click', e => anim.animate(elm,
				'position: absolute;' +
				'left: 0px => 100px;' +
				'top: 0px => 200px;' +
				'opacity: .3 -> 1;' +
				'transform: rotate(0deg => 360deg)',
				1, {
					endCallback: (elm) => anim_2(elm),
				}
			));

	</script>
</html>