JavaScript动画：动画后更改属性的值？

Question

我有一些javaScript代码，当在div上单击鼠标时，通过更改其“left”css属性，从左到右滑动div。代码工作得非常好。 最初，div的'left = 0' 假设我想将div滑动到一些随机数。我会这样做的。

function move(){
  var final = Math.random()*100  //Lets suppose final gets the value equal to 145 in this case

  ....code for sliding goes here

}

所以，现在div的左边应该等于145px。

现在，当我再次点击div时，会发生这种情况：

function move(){
 var final = Math.random()*100  //Lets suppose final gets the value equal to 30 in this case

  ....code for sliding goes here

}

现在，div不应该从145px滑动到30像素？因为当我第一次点击div时，它的左边变为145像素，不再保持为0.在我的情况下，当我再次点击它时，首先它会回到0像素，然后移动30像素。

Answer 1

这听起来似乎很容易转换：

CSS：

.moving_element {transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}

（根据您的代码需要替换该类）

JS：

elem.style.left = Math.random()*100+"px";

这就是你所需要的一切。浏览器将在定义的时间内将元素从一个位置平滑移动到下一个位置。