.box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
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);
})