首先用promise()实现div想右下左移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Promise 是什么</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 300px;
height: 300px;
background-color: olivedrab;
/* transition监控所有属性，0.5秒执行完毕 */
transition: all 0.5s;
}
</style>
</head>
<body>
<div id="box"></div>
<script></script>
</body>
<script>
// 找到div
const div = document.querySelector("div");
// 定义一个函数,（里面写入参数）并返回，点击了div的时候，就执行这个函数
const move = (obj, x, y) => {
// 这个函数要做的事是
obj.style.transform = `translate(${x}px,${y}px)`;
// 返回一个pormise对象,里面是一个函数作为参数
return new Promise((resolve) => {
// promise里面要执行resolve().但是要前一个obj结束了再执行这里resolve
obj.ontransitionend = () => {
resolve();
};
});
};
// 函数定义好了，div被点击的时候，就触发这个函数
div.onclick = function () {
// 因为是在onclick前面加的div,所以这个this是div
move(this, 150, 0)
// 执行函数的时候，返回了一个promise,并且是成功态度，这里就用then方法
.then(() => {
// then里面执行了成功态，要返回的是一个新的promiose对象
// 接着执行函数，（记住输入参数）
return move(this, 150, 150);
})
.then(() => {
return move(this, 0, 150);
})
// 这个then执行完了，接着走下一个then
.then(() => {
return move(this, 0, 0);
});
};
</script>
</html>
如果不用promise,用settimeout实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Promise 是什么</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 300px;
height: 300px;
background-color: olivedrab;
/* transition监控所有属性，0.5秒执行完毕 */
transition: all 0.5s;
}
</style>
</head>
<body>
<div id="box"></div>
<script></script>
</body>
<script>
// 找到div
const div = document.getElementById("box");
// 点击移动
// div.onclick = function () {
// // 移动，就是改变x轴和y轴的值，用translate改变transform
// div.style.transform = "translate(150px,0px)";
// // 向左边移动完了，向下移动，但是不是同步的，是异步，要1秒或者0.5秒以后
// setTimeout(() => {
// div.style.transform = "translate(150px,150px)";
// }, 500);
// // 继续回到左边
// setTimeout(() => {
// div.style.transform = "translate(0px,150px)";
// }, 1000);
// // 回到原点
// setTimeout(() => {
// div.style.transform = "translate(0px,0px)";
// }, 1500);
// };
// 第二种方法是调用ontrasitionend，意思是过渡结束以后执行
div.onclick = function () {
div.style.transform = "translate(150px,0px)";
div.ontransitionend = function () {
div.style.transform = "translate(150px,150px)";
div.ontransitionend = function () {
div.style.transform = "translate(0px,150px)";
div.ontransitionend = function () {
div.style.transform = "translate(0px,0px)";
};
};
};
};
</script>
</html>
