<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
function move(ele, dir, target) {
return new Promise((resolve, reject) => {
let start = parseInt(getComputedStyle(ele, null)[dir]);
// console.log(start)
let dis = (target - start) / Math.abs(target - start);
let speed = dis * 5;
function fn() {
let now = parseInt(getComputedStyle(ele, null)[dir]);
// console.log(now)
if (Math.abs(now - target) < 3) {
// console.log("运动完成...");
// cb && cb();
resolve();
} else {
ele.style[dir] = now + speed + "px";
// setTimeout(()=>{
// fn();
// },20)
requestAnimationFrame(fn);
}
}
fn();
})
}
let box = document.querySelector(".box");
move(box,"left",200).then(()=>{
return move(box,"top",200);
}).then(()=>{
// console.log("运动完成")
return move(box,"left",0);
}).then(()=>{
return move(box,"top",0);
}).then(()=>{
console.log("运动完成");
}).catch(err=>{
console.log(err);
})
</script>
</html>
