为什么我需要 setTimeout 才能使动画工作？ [复制]

【问题标题】：Why do I need a setTimeout for animation to work? [duplicate]为什么我需要 setTimeout 才能使动画工作？ [复制]
【发布时间】：2019-12-23 19:37:58
【问题描述】：

在下面的代码中，如果我省略了 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);

【问题讨论】：

标签： javascript css

【解决方案1】：

没有延迟（某些浏览器需要超过 0 毫秒的延迟，基本上只是让更改等待堆栈为空）浏览器不会发现 css 属性已更改。

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

这是一篇解决此问题的文章，就像您“修复”它一样。

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

【讨论】：