1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>move</title>
7 <style>
8 .square {
9 width: 40px;
10 height: 40px;
11 border-radius: 50%;
12 }
13
14 .square1 {
15 background-color: red;
16 }
17
18 .square2 {
19 background-color: yellow;
20 }
21
22 .square3 {
23 background-color: blue;
24 }
25 </style>
26 </head>
27
28 <body>
29 <div class="square square1" style="margin-left: 0"></div>
30 <div class="square square2" style="margin-left: 0"></div>
31 <div class="square square3" style="margin-left: 0"></div>
32 </body>
33 <script>
34 var square1 = document.querySelector('.square1');
35 var square2 = document.querySelector('.square2');
36 var square3 = document.querySelector('.square3');
37
38 /*function move(element,target,resolve){
39 let timer = setInterval(function(){
40 var marginLeft = parseInt(element.style.marginLeft, 10);
41 if(marginLeft == target){
42 resolve();
43 }else{
44 element.style.marginLeft = ++marginLeft+'px';
45 }
46 },13);
47 }*/
48 function move(element, target, resolve) {
49 let current = 0;
50 let timer = setInterval(function () {
51 element.style.transform = `translateX(${++current}px)`;
52 if (current > target) {
53 clearInterval(timer);
54 resolve();
55 };
56 }, 13);
57 }
58 function animate(element, target) {
59 return new Promise(function (resolve, reject) {
60 move(element, target, resolve);
61 });
62 }
63 animate(square1, 100)
64 .then(function () {
65 return animate(square2, 100);
66 })
67 .then(function () {
68 return animate(square3, 100);
69 });
70 </script>
71
72 </html>
