<分区>
标签 javascript css
<分区>
在下面的代码中，如果我省略了 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);
最佳答案
如果没有延迟(某些浏览器需要超过 0 毫秒的延迟，这基本上只是让更改等到堆栈为空)，浏览器不会发现 css 属性已更改。
实际上，这与浏览器“绘制/重新绘制”过渡有关。
这里有一篇文章解决了这个问题，就像您“修复”它一样。
http://www.mikechambers.com/blog/2011/07/20/timing-issues-when-animating-with-css3-transitions/
关于javascript - 为什么我需要 setTimeout 才能使动画工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57542249/