JS - DOM и внутренняя функция

Question

Итак, у меня есть код, который пытается сделать анимацию, но я столкнулся с ошибкой с первой попытки. Пожалуйста, помогите мне, что не так с этим кодом?

function move(obj, x, y) {
    la = 20;
    while (la <= x) {
      obj.style.marginLeft += "20px";
      la = la + 20;
    }
}
move(document.getElementById("div"), 200, 200)

<div id="div" style="border:1px solid black; width:100px; height: 100px;"></div>

Answer 1

Ваше время l oop заблокирует пользовательский интерфейс браузера, и все, что вы видите, это прыжок. Сделайте вызов asyn c с некоторой задержкой.

Или лучше: используйте анимацию CSS и просто переключите класс:

function move() {
  var element = document.getElementById("div");
  element.classList.toggle("moved");
}

#div {
  border:1px solid black;
  width:100px;
  height: 100px;
  margin: 0;
  transition: margin 300ms ease-in-out;
  background: transparent;
}

#div.moved {
  margin-left: 200px;
}

<div id="div" onClick="move()"></div>