javascript - 使用CSS移动div

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

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

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

请回答基本的JavaScript。我不希望该项目不使用外部库。

（编辑）
我不是在问如何在所有浏览器上实现这一目标。我在问如何在任何浏览器中完成它。

最佳答案

假设您的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是单击按钮时要移动的预定量。

本质上，此操作是将对象每十分之一秒（第9行中的100）移动1个像素，直到它移动到所需的距离为止。您也可以使用setInterval( )完成相同的操作。