<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>moveTo</title>
<style>
div{
width: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: green;
transition: all 1s;
}
</style>
</head>
<body>
<div id="el">
哦
</div>
<button>开始</button>
<script src="main.js"></script>
</body>
</html>
function moveTo(el, x, y, cb) {
el.style.transform = `translate(${x}px,${y}px)`
cb()
}
let el = document.querySelector('#el')
document.querySelector('button').addEventListener('click', () => {
moveTo(el, 100, 100, () => {
console.log(1);
})
})
function moveTo(el, x, y) {
return new Promise(resolve => {
el.style.transform = `translate(${x}px,${y}px)`
setTimeout(() => {
resolve()
}, 1000)
})
}
document.querySelector('button').addEventListener('click', () => {
moveTo(el, 100, 100)
.then(() => {
return moveTo(el, 200, 200)
})
.then(()=>{
return moveTo(el,150,300)
})
.then(()=>{
return moveTo(el,0,0)
})
.then(()=>{
console.log('移动结束')
})
})