SOURCE

// TODO: 5S 到达怎么实现
// js 实现 position
let reqId = null

function move (distance = 2) {
  let box = document.querySelector('.white')
  let left = box.style.left || 0
  let bottom = box.style.bottom || 0
  box.style.left = parseInt(left) + distance + 'px'
  // console.log(box.style.left)
  box.style.bottom = parseInt(bottom) + distance + 'px'
  
}

// ===
// reqId = window.requestAnimationFrame(move)
// if (document.querySelector('.white').offsetLeft >= 250) {
//     window.cancelAnimationFrame(reqId)
//   }
// ===

// 应该是这个函数的 dom 操作 会在下一次帧刷新一起执行
function loop () {
  move()
  reqId = window.requestAnimationFrame(loop)
  if (document.querySelector('.white').offsetLeft >= 250) {
    window.cancelAnimationFrame(reqId)
  }
}

// reqId = window.requestAnimationFrame(move)

loop()

// timer = setInterval(move,10)




// requestFrame

<div class="container">
  <div class="white"></div>
</div>

.container {
  width: 300px;
  height: 300px;
  background: #000;
  position: relative;
}
.white {
  width: 50px;
  height: 50px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}