display 变更会强制中断所有 transition，因其无中间态且使元素退出渲染树；需用 requestanimationframe 分帧操作确保过渡启动，或改用 visibility/opacity、max-height 等可过渡属性替代。
display 变更会强制中断所有 transition
浏览器对 display 的处理是“离散式”的：它没有中间态，display: none 和 display: block 之间不存在插值空间。一旦你同时修改 display 和其他带 transition 的属性（比如 opacity 或 transform），浏览器会立刻触发重绘，跳过全部过渡过程——哪怕 CSS 规则写得完全正确。
这不是 bug，而是规范行为。因为 display: none 会让元素彻底退出渲染树，后续任何样式变更都失去作用对象；而 display: block 的恢复又是一次全新挂载，浏览器不会“补播”之前被中断的过渡。
为什么 requestAnimationFrame 能绕过这个问题
requestAnimationFrame 的关键价值在于它把 DOM 操作时机锚定在浏览器「下一次重绘之前」。这意味着你可以分两帧完成动作：
- 第一帧：移除
display: none（或设为block），但先不触发动画类 - 第二帧：
requestAnimationFrame回调中添加动画 class 或直接设置目标样式
这样就确保了元素已重新进入渲染树、样式计算和布局已完成，再启动 transition 才有起点可依。否则 JS 同步改 display + class，浏览器会在同一帧内判定“状态突变”，直接跳过插值。
常见错误写法：
element.style.display = 'block';<br>element.classList.add('fade-in');
✅ 正确做法：
element.style.display = 'block';<br>requestAnimationFrame(() => {<br> element.classList.add('fade-in');<br>});
比 display 更安全的显隐替代方案
如果只是为了控制显隐并保留过渡，优先避免 display：
- 用
visibility: hidden+opacity: 0组合：两者都支持 transition，且不破坏渲染流 - 用
max-height: 0+overflow: hidden控制高度过渡（需预设合理max-height值） - 若必须用
display（如 SEO 或无障碍需求），务必确保它和 transition 不在同一帧触发
注意：visibility 不影响文档流，max-height 过渡在内容高度动态时容易失准——这些取舍点比“能不能用”更重要。
SPA 路由切换中容易漏掉的细节
在 Vue/React 等框架里，组件卸载/挂载常伴随 display 隐式切换（尤其用 v-if 或 key 强制重渲染）。此时仅靠 CSS transition 不够，必须配合生命周期钩子：
- Vue：在
onBeforeUnmount中移除动画 class，等onMounted后再用requestAnimationFrame添加 - React：在
useEffectcleanup 阶段清理状态，新组件挂载后用useLayoutEffect（它在 layout 后、paint 前执行，效果等价于 rAF）
最隐蔽的坑是：你以为 transition 写对了，其实它根本没机会启动——因为元素还没真正出现在 DOM 里，或者刚出现就被 JS 同步改掉了状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
