javascript - 当我删除新创建元素的类时，CSS3 过渡不起作用

Question

我所做的：

1. 创建一个元素，该元素的样式包含 CSS3 过渡。
2. 向它添加一个类（此类的样式包含背景颜色属性）。
3. 给它添加一个innerHTML。
4. 删除类。

当我删除类就像

element.classList.remove('classname')

没有过渡，但是当我设置一个延迟为 0 秒的超时时，它可以工作：

setTimeout(function() { element.classList.remove('classname'); }, 0);

为什么？如何避免 setTimeout 功能或使用它是否正常？

示例：http: //jsfiddle.net/JHevJ/1/

Answer 1

因为您在屏幕计算元素的重绘之前删除了该类。您在它首先显示为该类之前将其删除，因此它认为不需要动画。

超时使它“等待” 0 毫秒，然后删除该类，这让它首先显示带有该类的元素，“等待”0 时间，然后删除该类。