ie9及更早版本完全不支持transition，解析器直接忽略整条声明；ie10–ie11支持但需标准文档模式，且对简写、继承和媒体查询重写极度敏感，必须显式声明属性并防降级。
IE9 及更早版本对 transition 完全无感知，写了等于没写；IE10–IE11 能用，但必须运行在标准文档模式下，且不支持部分缓动函数和简写容错。
IE9 及以下：CSS 层面无解，必须用 JS 替代
它不是“效果差”，是解析器直接跳过整条 transition 声明——transition: all 0.3s 在 IE9 开发者工具里显示为 “invalid”，状态划掉。连带 transform 和 opacity 的过渡也无效。
- 别试
max-height模拟展开：IE9 支持该属性，但不支持其过渡，仍是跳变 - 避免
jQuery.animate()：IE9 中依赖已废弃的filter: alpha()，易出错且维护已停止 - 显隐切换可用
visibility: hidden/visible+filter: alpha(opacity=0)组合实现渐变感 - 高度动画优先用
requestAnimationFrame+ 手动插值：element.style.height = h + 'px'，注意先批量写、再读尺寸，防止 layout thrashing
IE10–IE11：能用但极其脆弱，必须显式声明+防降级
它们支持标准 transition，但文档模式一旦退化（比如被 <meta http-equiv="X-UA-Compatible" content="IE=8"> 触发），就彻底失效。而且对简写、继承、媒体查询重写极度敏感。
- 确保
最顶部有<meta http-equiv="X-UA-Compatible" content="IE=edge">，HTTP 响应头中的同名字段会覆盖它 - 每个需过渡的元素单独写完整声明，例如：
transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), opacity 0.3s ease;，别依赖父级all继承 -
will-change: transform在 IE11 完全无效，backface-visibility: hidden比translateZ(0)更可靠 - 媒体查询中重写
transition时，必须显式写出所有要过渡的属性，否则旧引擎清空前值
离散属性（如 display、visibility）在所有旧浏览器中都不支持过渡
transition: display 0.3s 在任何 IE 或 Android 4.4 WebView 中都静默失效——浏览器根本不做插值，没有中间状态。Chrome 117+ 的 transition-behavior: allow-discrete 目前毫无兼容性可言。
-
display必须降级为opacity+transform+pointer-events控制显隐 -
visibility可配合opacity和transition实现视觉过渡，但需手动控制visibility切换时机（如在transitionend后设visibility: hidden） - iOS Safari 9–10 中
transitionend可能丢失，建议加setTimeout兜底清理临时 class 或will-change
兜底动画逻辑必须脱离 CSS transition 依赖
当兼容性要求压倒性能时，requestAnimationFrame + 手动插值反而更可控：它避开浏览器对 cubic-bezier 解析差异、避免调度不准掉帧，也绕开旧引擎对合成层触发的不可靠判断。
- 优先用
transform: translate3d(0, 0, 0)触发硬件加速，比translateX()更稳 - 避免在
touchstart中连续改样式又读尺寸——一次getBoundingClientRect()就可能卡住首帧 - 读写分离：用
requestAnimationFrame包裹读操作，“先批量写，下一帧再读” - 不要把降级逻辑写在组件内部混用
@supports和 JS 注入——加载顺序不确定，容易覆盖
真正容易被忽略的是：很多人在 IE11 里切到 “IE9 文档模式” 测试，误以为这就是真实 IE9 行为——但它的渲染引擎仍是 Trident 7.0，某些 transform 组合仍可运行，而真实 IE9 连解析都不会做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
