时间戳

首页 > 解决方案 > JS - DOM 和内部函数

javascript - JS - DOM 和内部函数

问题描述

所以我有一个代码，它试图制作动画，但自从我第一次尝试以来我一直面临失败。请帮助我，这段代码有什么问题？

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>

标签： javascriptanimation

解决方案

您的 while 循环将阻止浏览器的 UI，您所看到的只是跳转。使其异步调用有一些延迟。

或者更好的方法：使用 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>

推荐阅读