触发附加元素上的 CSS 过渡

由于浏览器优化批量回流，新附加元素上的 CSS 过渡可能无法触发。当添加元素和 CSS 转换都在单轮 JavaScript 中执行时，浏览器可能会组合这些操作，从而导致仅应用单个样式值，而无需任何中间转换。

方法用于触发过渡

有多种方法可以在附加元素上触发 CSS 过渡：

• SetTimeout: 使用 setTimeout( 延迟添加 CSS 类) 允许在渲染之前存在两个样式值，从而触发过渡。
• offsetWidth: 访问元素的 offsetWidth 属性会强制回流，确保应用 CSS 过渡。
• **getComputedStyle()：与offsetWidth类似，调用getComputedStyle()也会触发重排并强制转换。

首选解决方案

首选在附加元素上触发 CSS 转换的解决方案是使用 offsetWidth 或 getComputedStyle() 访问元素的计算样式属性。这种方法可确保一致地触发转换，并最大限度地降低因浏览器优化而导致动画中断的风险。