transition没反应需确认：是否作用于可动画属性（如opacity、transform）、是否触发了实际属性值变化、transition-delay计时起点是否正确、避免width/height等高开销属性。
transition 属性写对了但没反应？先确认是否作用在可动画的 CSS 属性上
CSS transition 只对「可计算、可插值」的属性生效，比如 opacity、transform、color、width（需有明确数值单位）等。像 display、height（从 auto 开始）、font-family、visibility 这类不可插值或离散型属性，加了 transition 也不会动。
常见踩坑点：
-
height: auto→height: 200px不会过渡（浏览器无法计算auto的中间值） -
display: none→display: block完全无过渡效果（display不支持过渡） - 用了
transition: all 0.3s，但实际变化的是z-index或cursor，这些根本不能动
触发过渡必须发生「属性值的实际变更」，而非仅 class 切换或伪类悬停
给元素写好 transition 后，它不会自己动；必须靠 JS 改样式、用户交互（如 :hover）、或 class 切换引起目标属性值变化，才能真正触发。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
:hover规则里必须包含与默认状态不同的、可过渡的属性值，例如：opacity从1→0.6 - JS 中用
element.style.xxx = 'xxx'直接改内联样式时，若新旧值相同（比如都为'1'），也不会触发过渡 - 用
classList.toggle()切换 class 时，两个 class 必须对同一属性设不同值（如.open { height: 200px; }vs.closed { height: 0; }）
transition-delay 和 transition-duration 混用时容易忽略重绘时机
过渡延迟（transition-delay）是从「属性值开始变化」那一刻起计时，不是从鼠标移入或 class 添加那一刻起。如果 JS 中连续修改多个属性，或样式计算被阻塞（如强制同步布局），可能导致延迟失效或跳帧。
实操建议：
- 避免在
transition中混用width/height和transform：前者触发布局重排（开销大），后者只触发合成层重绘（更顺滑） - 需要「进入+退出」都带过渡？别只靠
:hover，要确保默认状态和悬停状态都声明了transition，否则退出时可能突变 - 调试时可在 DevTools 的 Styles 面板勾选
Show transitions（Chrome），实时观察哪些属性正在过渡
浏览器兼容性与 will-change 对过渡启动的影响
老版本 Safari（transition 在某些组合下（如 transform + opacity 同时过渡）存在渲染异常；Firefox 对 filter 过渡的支持也晚于 Chrome。
另外，will-change 虽非必需，但在复杂动画前主动提示浏览器「这个元素即将变化」，能提前创建图层，减少首帧卡顿：
button {
transition: transform 0.2s, opacity 0.2s;
will-change: transform, opacity;
}
但注意：will-change 不该滥用——长期开启会持续占用内存和 GPU 资源，只应在真正需要过渡前动态添加、过渡后移除。
最常被忽略的一点：过渡效果是否被父级 overflow: hidden 截断，或被 transform: scale(0) 类样式提前隐藏，导致压根看不到动画过程。
