老版Chrome/Firefox中transition不生效需补厂商前缀；触发失败因属性不可过渡或条件未满足；transitionend需兼容多事件名并防冒泡；性能差因使用重排属性，应优先用transform/opacity。
transition在老版Chrome/Firefox里不生效？检查是否漏了厂商前缀
早期浏览器（如 Chrome 25 以下、Firefox 15 以下）对 transition 支持不完整，只认带前缀的写法。现代项目虽可忽略，但若需兼容 IE10、Android 4.3 WebView 或某些嵌入式 Chromium 内核，仍得手动补全。
常见错误现象：CSS写了 transition: all 0.3s，动画完全不动，开发者工具里看到该声明被划掉（invalid）。
- 必须按顺序写：先写带前缀的版本，再写标准版 —— 浏览器会忽略不认识的声明，取第一个有效的
- 关键前缀只有三个：
-webkit-transition（Safari/旧Chrome/Android Browser）、-moz-transition（旧Firefox）、-o-transition（旧Opera，基本可省） - IE10 支持标准
transition，但不支持transition-property: all的部分值（比如background-position），得明确写属性名
button {
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
transition触发失败？确认触发条件满足且元素有可过渡属性
transition 不是“加了就动”，它只响应 CSS 属性值的**变化**，且该属性必须是可过渡的（animatable）。很多问题其实卡在触发逻辑上，而非语法本身。
使用场景：hover 动画、JS 切换 class、表单 focus 状态等。
立即学习“前端免费学习笔记（深入）”；
- 不能过渡 display（
display: none → block无效），改用opacity+visibility或max-height - 不能直接过渡
height: auto，浏览器无法计算起止值；可用max-height模拟，或 JS 获取真实高度后设为具体 px 值 - JS 中通过 class 切换触发时，确保 class 变更后属性值确实改变了 —— 比如两次都设
color: #333，不会触发过渡 - 用
getComputedStyle(el).propertyName在控制台验证当前值，避免 CSS 层叠覆盖导致“看似变了实则没变”
transitionend事件监听不到？注意浏览器差异与冒泡行为
transitionend 是唯一能知道过渡结束的钩子，但它在不同浏览器中事件名和触发时机不一致，容易监听失败。
常见错误现象：绑定 transitionend 后无响应，或在 Safari 中触发两次。
- 事件名有前缀：
webkitTransitionEnd（iOS/Safari）、otransitionend（旧Opera），标准名是transitionend - 必须监听所有可能的事件名，否则 iOS 下一定失效；建议用
onevent = handler方式或封装一次监听函数 - 该事件会冒泡，如果父元素也有 transition，可能误触发 —— 检查
event.target === el再处理 - 过渡被中断（如 hover 中途移出）时，Chrome/Firefox 仍会触发
transitionend，但event.elapsedTime小于设定时长；Safari 可能不触发，需加 timeout 保底
transition性能差、卡顿？避开重排（reflow）属性和层级陷阱
过渡动画卡顿，往往不是 transition 写错了，而是选了代价高的属性，或没启用硬件加速。
性能影响主要来自浏览器渲染管线：修改某些 CSS 属性会强制同步重排（reflow）或重绘（repaint），而 GPU 只加速特定属性。
- 安全属性（只触发合成，GPU 加速）：
transform（translateX/scale/rotate）、opacity - 危险属性（触发重排）：
width、height、top、left、margin、padding—— 即使加了transition也卡 - 想用
left实现位移？改用transform: translateX(...)，语义相同但性能天壤之别 - 复杂动画中，给动效元素加
will-change: transform（仅必要时），但别滥用，否则内存开销大
容易被忽略的是：父容器若含 overflow: hidden 且子元素用 transform 超出边界，某些 Android 版本会降级到 CPU 渲染 —— 此时加 transform: translateZ(0) 强制提升图层可缓解。
