如何判断HTML元素何时已就绪可启动CSS过渡？

这个场景我太熟悉了！用insertAdjacentHTML或innerHTML动态添加元素后，直接加类启动过渡经常失效——本质是浏览器还没完成新元素的渲染布局，跳过了过渡的初始状态。靠setTimeout猜延迟完全看运气，下面给你两个靠谱的方案：

方案一：嵌套requestAnimationFrame（最推荐） #

利用浏览器的渲染周期来精准把控时机：第一次requestAnimationFrame会把任务安排在下一次重绘前执行，第二次则是在重绘完成后执行，这时候新元素肯定已经完成渲染就绪了。

示例代码：

// 先插入动态HTML
const container = document.getElementById('container');
container.insertAdjacentHTML('beforeend', '<div class="box"></div>');
const newBox = container.querySelector('.box');

// 嵌套两次requestAnimationFrame确保元素就绪
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    newBox.classList.add('slide-in'); // 此时添加过渡类会正常触发动画
  });
});

这个方法完全和浏览器渲染节奏同步，不管设备性能如何，都能准确抓住时机，比固定延迟的setTimeout靠谱太多。

方案二：强制浏览器计算布局 #

调用元素的getBoundingClientRect()方法，会让浏览器立即执行布局计算（触发重排），强制完成新元素的渲染就绪，之后直接加类就能触发过渡。

示例代码：

// 插入元素
const container = document.getElementById('container');
container.innerHTML += '<div class="box"></div>';
const newBox = container.querySelector('.box');

// 强制浏览器计算元素布局，确保元素就绪
newBox.getBoundingClientRect();

// 直接添加过渡类
newBox.classList.add('slide-in');

这个方法更简洁，适合单次插入元素的场景，唯一要注意的是频繁调用可能会有性能损耗，但单次使用完全没问题。

为什么setTimeout不靠谱？ #

setTimeout(..., 0)是把任务放到宏任务队列，而浏览器的渲染是在微任务执行完后、宏任务执行前进行的。如果插入元素后还有其他微任务在运行，就会推迟渲染，导致setTimeout执行时元素还没就绪；而固定延迟比如100ms，在性能好的设备上会浪费时间，性能差的设备又可能不够。

内容的提问来源于stack exchange，提问作者user8391200