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

Question

我有一些 JavaScript 代码，当鼠标单击 div 时，它通过更改其“左”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 不应该从 145 像素滑到 30 像素吗？因为当我第一次单击 div 时，它的左侧变为 145 px，不再保持为 0。在我的情况下，当我再次单击时，它首先回到 0 px，然后移动 30px。

Answer 1

这听起来好像通过过渡会容易得多：

CSS：

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

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

JS：

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

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