JavaScript动态创建Div后CSS Transition无动画效果的解决方案咨询

这个问题其实是浏览器的重排/重绘机制导致的——当你刚把元素插入DOM，浏览器还没来得及完成元素的初始布局计算，这时你立刻设置过渡和目标样式，浏览器会把初始状态和最终状态合并成一次样式更新，直接跳到最终结果，跳过了过渡动画。而alert（或者定时器）会给浏览器留出时间完成初始布局，所以动画能正常触发。

不用硬编码定时器的话，有两个更优雅的方案：

方案1：使用requestAnimationFrame（推荐） #

这是浏览器专门为动画场景提供的API，它会把你的回调函数安排在下一次浏览器重绘之前执行，确保元素已经完成DOM插入和初始布局计算：

// HTML来自外部源，无法修改
var TheHTML = "<div id=\"abc\"></div>";
// 将HTML转换为元素
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;
// 添加新元素
document.getElementById("container").appendChild(TheNewElement);

// 等待浏览器完成初始布局后再设置过渡
requestAnimationFrame(() => {
  const abcElement = document.getElementById("abc");
  abcElement.style.transition = "left 1s, width 1s";
  abcElement.style.left = "100px";
  abcElement.style.width = "100px";
});

方案2：强制触发浏览器重排（hacky但有效） #

通过读取元素的布局属性（比如offsetWidth），可以强制浏览器立即完成当前的重排操作，这样后续的样式修改就会被识别为状态变化：

// HTML来自外部源，无法修改
var TheHTML = "<div id=\"abc\"></div>";
// 将HTML转换为元素
var TempDiv = document.createElement('div');
TempDiv.innerHTML = TheHTML;
var TheNewElement = TempDiv.firstChild;
// 添加新元素
document.getElementById("container").appendChild(TheNewElement);

const abcElement = document.getElementById("abc");
// 读取offsetWidth强制浏览器计算初始布局
abcElement.offsetWidth;

// 现在设置过渡和目标样式就能触发动画了
abcElement.style.transition = "left 1s, width 1s";
abcElement.style.left = "100px";
abcElement.style.width = "100px";

两者对比的话，requestAnimationFrame是更规范、无阻塞的方式，而且符合浏览器的动画调度机制，优先推荐使用。

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