javascript - 使用 CSS 移动 div

Question

这个问题应该很简单，但我是这些方法的新手。

简而言之，这就是我想要完成的:我想触发一个动画，将 div 移动指定数量的像素。就是这样。假设我在屏幕上有代表每个键盘箭头的按钮。每次单击箭头时，框都会从其当前位置沿适当的方向移动指定数量的像素。

我最初使用过渡来完成此操作，但它只能使用一次。几个小时以来，我一直在寻找这个非常基本的问题的答案，但我真的很沮丧。

请使用基本的 javascript 回答。我不想为此元素使用外部库。

(编辑)我不是在问如何在所有浏览器中实现这一点。我在问如何在任何浏览器中完成它。

Answer 1

假设您的 ElementToMove 在 CSS 中绝对定位，理论上您可以将类似以下内容添加到您的点击处理程序中:

var elementToMove = document.getElementById( 'ElementToMove' );
while ( elementToMove.left < elementToMove.left + 10 )
{
  window.setTimeout(
    function ( )
     {
       elementToMove.style.left = (elementToMove.style.left + 1) + "px";
     },
     100
   );
 }

第 2 行中的数字 10 将是单击按钮时要移动的预定量。

本质上，它所做的是每十分之一秒将对象移动 1 个像素(第 9 行中的 100)，直到它移动到您想要的位置。您也可以使用 setInterval( ) 完成同样的事情。