为什么需要setTimeout才能使动画正常工作？

Question

在下面的代码中，如果我忽略了setTimeout，则过渡将不起作用。这里的setTimeout的目的是什么？

  function showCircle (top, left, radius) {
  let circleDiv = document.querySelector(".circle"); 

  circleDiv.style.top = top + "px";
  circleDiv.style.left = left + "px";

  setTimeout (() => {
    circleDiv.style.width = radius*2 + "px";
  circleDiv.style.height = radius*2 + "px";
  },0)
}

showCircle (150,150,100);

Answer 1

没有延迟（某些浏览器将需要大于0ms的延迟，而基本上只是使更改等待直到堆栈为空），浏览器不会发现css属性已更改。

实际上，这与浏览器的“绘制/重新绘制”过渡有关。

这里有一篇文章介绍了解决此问题的方法，就像您“解决”该问题的方法一样。

http://www.mikechambers.com/blog/2011/07/20/timing-issues-when-animating-with-css3-transitions/