-
Notifications
You must be signed in to change notification settings - Fork 0
/
animation1.js
72 lines (57 loc) · 2.54 KB
/
animation1.js
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
71
72
const createDiv = require('./creatDiv');
function animation1(entry, color1, color2, color3, speed, toTransit = ()=> {}) {
if(entry.innerHTML===""){
entry.style.display = "block";
//toTransit
setTimeout(() => {
toTransit();
}, 4000*speed);
//start
createDiv("mainSquare", color1, entry);
document.querySelector(".mainSquare").style.animation = "toLeftAppear ease-in-out " + 2000*speed + "ms forwards";
//step0
setTimeout(() => {
createDiv("bgSquare", color2, entry);
document.querySelector(".mainSquare").style.animation = "mainSquareAnimation ease-in " + 2000*speed + "ms forwards";
}, 2000*speed);
//step1
setTimeout(() => {
createDiv("mainSquare2", color3, entry);
document.querySelector(".mainSquare2").style.animation = "opacityAppear ease-in " + 500*speed + "ms forwards";
}, 4000*speed);
//step2
setTimeout(() => {
document.querySelector(".mainSquare2").style.animation = "scaleXMax ease-in " + 1000*speed + "ms forwards";
}, 5000*speed);
//step3
setTimeout(() => {
document.querySelector(".mainSquare2").style.animation = "scaleYMax ease-in " + 750*speed + "ms forwards";
}, 6000*speed);
//step4
setTimeout(() => {
createDiv("mainSquare3", color2, entry);
document.querySelector(".mainSquare3").style.animation = "xMax ease-in-out " + 1000*speed + "ms forwards";
}, 7250*speed);
//step5
setTimeout(() => {
createDiv("mainSquare4", color1, entry);
document.querySelector(".mainSquare4").style.animation = "xMax ease-in-out " + 1000*speed + "ms forwards";
}, 8250*speed);
//step5
setTimeout(() => {
entry.innerHTML = "";
createDiv("mainSquare4--left", color1, entry);
createDiv("mainSquare4--right", color1, entry);
document.querySelector(".mainSquare4--left").style.animation = "disapear-left ease-in-out " + 1000*speed + "ms forwards";
document.querySelector(".mainSquare4--right").style.animation = "disapear-right ease-in-out " + 1000*speed + "ms forwards";
}, 9250*speed);
return new Promise ((resolve,reject) => {
setTimeout(() => {
entry.innerHTML = "";
entry.style.display = "none";
resolve();
}, 10250*speed);
});
}
}
exports.animation1 = animation1;