在附加元素上触发CSS过渡

在附加元素上触发CSS过渡

不激活新添加的元素的动画的原因是浏览器的批量重排。

当添加元素时，需要回流。添加类也是如此。但是，当您在 单个javascript循环中
同时进行这两个 *** 作时，浏览器会抓住机会优化第一个。在这种情况下，只有一个（同时是初始和最终）样式值，因此不会发生过渡。

这个

setTimeout

技巧行得通，因为它延迟了类向另一轮javascript的添加，因此呈现给渲染引擎的值有两个，需要计算，因为有时间点，第一个值呈现给用户时。

批处理规则还有另一个例外。如果您尝试访问即时值，浏览器需要计算它。这些值之一是

offsetWidth

。当您访问它时，将触发重排。在实际显示期间，另外一个是单独完成的。同样，我们有两个不同的样式值，因此我们可以及时对它们进行插值。

实际上，这是极少数需要这种行为的情况之一。在大多数情况下，在DOM修改之间访问引起回流的属性可能会导致严重的速度下降。

首选的解决方案可能因人而异，但是对我来说，

offsetWidth

（或

getComputedStyle()

）的访问是最好的。在某些情况下，当

setTimeout

被解雇时，它们之间不会重新计算样式。这种情况很少见，大多数情况是在加载的网站上发生的，但是这种情况确实发生了。这样一来，您将无法获得动画。通过访问任何计算出的样式，您将强制浏览器进行实际计算。