transition不生效时，先检查是否触发重排；display切换不可动画，应改用opacity+visibility；IE10+/Safari旧版需注意兼容性；JS触发须先设transition再强制重排；@supports仅检测语法支持，须配合UA检测处理半支持场景。
transition 不生效时，先检查是否触发了重排
很多情况下 transition 看似“没反应”，其实不是 CSS 写错了，而是浏览器压根没进入过渡流程。关键在于：只有可动画的属性（比如 opacity、transform、background-color）在**从一个有效值变到另一个有效值**，且该变化能被浏览器识别为“样式更新触发重绘+重排”时，过渡才可能启动。
- 常见陷阱：
display: none→display: block切换不会触发动画，因为display不是可过渡属性，且none会完全移出渲染树 - 正确做法：用
opacity+visibility替代display控制显隐；或先设display: block，再用setTimeout延迟一帧修改opacity - 验证方式：在 DevTools 的 Styles 面板里手动改值，看是否出现「过渡进度条」——没有说明当前变更未进入 transition 流程
IE10/11 和旧版 Safari 中 transition 兼容性要点
IE10+ 支持 transition，但不支持 transition: all 对自定义属性或某些 SVG 属性的动画；iOS Safari 8–9 对 transform 过渡有渲染抖动，尤其配合 will-change 时容易失效。
- 必须加前缀的场景：Safari ≤ 6.1、Android Browser ≤ 4.3 需要
-webkit-transition，且要和无前缀版本并存 - 避免用
transition: all 0.3s：它会让所有变更都尝试过渡，包括你没预料到的（比如height: auto→height: 20px），导致卡顿或跳变 - 对老浏览器降级的核心逻辑：不是“禁用动画”，而是“确保状态变更后 UI 仍可用”。例如折叠菜单，即使没过渡，也要保证点击后
max-height正确切换、内容可读
JavaScript 主动触发 transition 的安全写法
用 JS 修改样式后立刻读取 offsetHeight 或 getComputedStyle，会强制同步触发重排，从而让浏览器“意识到”这是一个需要过渡的起始状态。但这个时机很敏感，稍有延迟就失效。
- 典型错误：
el.style.opacity = '0'; el.style.transition = 'opacity 0.3s';—— 顺序反了，浏览器来不及记录旧值 - 正确顺序：
el.style.transition = 'opacity 0.3s';→ 强制重排（如el.offsetHeight）→el.style.opacity = '0'; - 更稳妥方案：用
requestAnimationFrame包一层，比如：el.style.transition = 'opacity 0.3s';<br>requestAnimationFrame(() => {<br> el.style.opacity = '0';<br>}); - 注意：不要在
transitionend里直接移除transition属性，否则连续触发时可能漏掉事件；建议用 class 切换控制动画开关
用 @supports 检测 transition 支持并提供 fallback
@supports 是目前最干净的降级手段，但它不能检测“过渡是否流畅”，只能判断语法支持。别指望它识别 IE10 的部分 bug。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
@supports (transition: opacity 0.3s) {<br> .fade { transition: opacity 0.3s; }<br>}<br>@supports not (transition: opacity 0.3s) {<br> .fade { opacity: 1; } /* 移除所有过渡声明，确保基础状态明确 */<br>} - 注意：
@supports不支持嵌套媒体查询，也不支持检测 vendor-prefixed 版本，所以前缀规则得单独写 - 真正难处理的是“半支持”场景：比如 Android 4.4 WebView 支持
transition但对box-shadow动画极卡——这种只能靠 UA 检测 + 降级 class，没法全自动
过渡降级不是让动画消失，而是让状态变更不依赖视觉反馈也能被用户感知。最常被忽略的一点：过渡失败时，transitionend 事件根本不会触发，任何依赖它的清理逻辑（比如移除 loading 状态）都会卡住。务必加超时兜底。
