promise实现div向上下左右移动```js``` .then(() => move(this, 150, 150)

<!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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 300px;
        height: 300px;
        background-color: olivedrab;
        transition: all 0.5s; /* css里面的过渡属性，包括要执行的名称，时间，和曲线*/
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script>
    const div = document.querySelector("div");
    // 先定义一个函数，需要的时候调用这个函数
    const move = (obj, x, y) => {
      // 当执行这个函数的时候，改变的是transform属性
      obj.style.transform = `translate(${x}px,${y}px)`;
      //   返回一个promise
      // promise里面的参数和promise定义时候一样
      return new Promise((resolve) => {
        // promise如果下面用resolve来执行，就意味着是成功态
        // resolve不要立即执行，要等obj的过渡结束以后，才执行resolve
        obj.ontransitionend = () => {
          //
          resolve();
        };
      });
    };

    // 函数定义好了，可以用了
    div.onclick = function () {
      //当点击了div就开始执行定义好的move函数
      // 接着执行then
      // 因为执行then也返回的是一个promise
      // then里面的参数也是一个箭头函数
    //   只有一行，可以省略return和函数的大括号
      move(this, 150, 0)
        .then(() => move(this, 150, 150))
        // then执行完以后，需要有一个返回值

        .then(() => move(this, 0, 150))
        .then(() => move(this, 0, 0));
    };
  </script>
</html>