JS中DOM元素样式过渡动画失效原因探究——FLIP动画原理相关疑问

这背后的核心原因是浏览器的样式更新批处理机制，以及不同操作触发布局的时机不同。咱们一步步拆解：

先说说浏览器的"偷懒"优化 #

浏览器为了提升性能，会把连续的DOM样式修改操作批量合并，不会每改一次样式就立刻重新计算布局（重排）和渲染（重绘）。只有当你访问一些需要依赖当前布局的属性时，它才会被迫立刻执行所有pending的样式修改，完成布局更新。

分析run1（有动画的版本） #

const run1 = () => {
  dom.style.width = "40px";
  dom.style.transition = "width 300ms ease";
  dom.offsetHeight; // 关键触发点
  dom.style.width = "80px";
};

1. 前两行修改了width和transition属性，但这时候浏览器只是把这些修改放进了"待处理队列"，还没实际更新DOM布局。
2. 第三行访问dom.offsetHeight：这是一个布局相关属性（需要知道元素的实际高度才能返回值），浏览器为了给你正确的结果，会立刻执行队列里的所有样式修改——也就是把元素的width设为40px，同时应用transition规则。
3. 第四行再把width改成80px：这时候浏览器已经确认了元素的初始状态（width=40px），transition已经生效，所以它会把这次的样式变化识别为"从40px到80px的过渡"，自然就触发了动画。

分析run2（无动画的版本） #

const run2 = () => {
  dom.style.width = "40px";
  dom.style.transition = "width 300ms ease";
  requestAnimationFrame(() => { dom.style.width = "80px"; });
};

1. 前两行同样是把样式修改放进待处理队列，浏览器没立刻布局。
2. requestAnimationFrame的回调会在下一次浏览器重绘之前执行，但这时候浏览器还没处理之前的样式修改队列。
3. 当回调执行时，浏览器会把width:40px、transition、width:80px这三个修改一次性合并处理——相当于直接把元素的width设为80px，没有中间的40px状态。transition需要看到"前后两个不同的状态"才能触发动画，这里没有状态变化，所以自然就没动画了。

延伸：FLIP动画的核心思路 #

你提到的FLIP动画，本质就是利用这种"强制触发布局"的技巧：

• First：记录元素的初始位置/尺寸（比如通过getBoundingClientRect或者访问布局属性触发）
• Last：修改元素到最终状态
• Invert：计算初始和最终状态的差值，用transform把元素移回初始位置
• Play：移除transform，让transition自动播放到最终状态

这里的offsetHeight就是FLIP里触发"First"状态的关键操作，让浏览器确认初始状态，后续的样式变化才能被transition捕捉到。

完整示例代码 #

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>document</title>
<style>
#dom {
list-style: none;
padding: 12px;
margin: 6px 0;
background: #e6f0ff;
border-radius: 6px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="dom">dom</div>
<script>
const dom = document.getElementById("dom");
const run1 = () => {
//Good
dom.style.width = "40px";
dom.style.transition = "width 300ms ease";
dom.offsetHeight;
dom.style.width = "80px";
};
const run2 = () => {
//bad
dom.style.width = "40px";
dom.style.transition = "width 300ms ease";
requestAnimationFrame(() => { dom.style.width = "80px"; });
};
setTimeout(run2, 3000);
</script>
</body>
</html>

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