transition没效果需先确认是否触发属性变化而非重排，检查computed style中transition是否生效，避免使用不可过渡属性，优先用transform/opacity，注意flex/grid布局抑制及主线程阻塞。
transition 属性写对了但没效果？先确认触发的是属性变化而非重排
CSS transition 只对「可过渡的属性」在「值发生变化时」起作用，且该变化必须是通过改变样式（如 class 切换、style 修改）触发的——不是通过 DOM 重排（比如 JS 改 innerHTML 导致 layout 重建）或强制同步读取（如访问 offsetHeight）打断的。常见现象是：加了 transition: all 0.3s，但元素一动就“瞬移”，毫无过渡。
- 确保过渡触发方式是「状态切换」：比如用
classList.toggle('active')切换 class，而不是直接改element.style.left = '100px'后立刻又改一次 - 避免在修改样式后立即读取布局属性（如
clientWidth、getComputedStyle(el).height），这会强制浏览器同步计算，清空过渡队列 - 检查是否误用了不支持过渡的属性，例如
display、z-index、position本身不能过渡（但top/left等偏移量可以）
过渡不起作用？检查 computed style 中 transition 是否真实生效
浏览器 DevTools 的 Styles 面板显示的是声明的样式，不一定代表实际生效；要确认 transition 是否进入 computed style，得看 Computed 面板里有没有 transition-property、transition-duration 这些字段。经常出现的情况是：样式被更高优先级规则覆盖、写在未激活的媒体查询中、或父元素设置了 transform: translateZ(0) 等导致层叠上下文变化，间接影响子元素过渡渲染。
- 在 Elements → Computed 中搜索
transition，确认所有相关属性（property、duration、timing-function）都有值且非none或0s - 检查是否有
!important冲突，或 CSS 自定义属性（--transition）未被正确解析（需确保变量有 fallback 且作用域正确） - 若元素处于
visibility: hidden或opacity: 0且无过渡，后续显示时可能跳过初始状态——应确保初始态和目标态都明确设好可过渡属性
transition-delay 为 0 却延迟触发？可能是动画帧被阻塞或硬件加速缺失
即使 transition-delay: 0s，也可能因主线程繁忙（如长任务、大量 JS 执行）导致第一帧渲染滞后，看起来像“卡一下再动”。另外，某些属性（如 width、height）过渡依赖 layout 计算，性能差；而 transform 和 opacity 是合成层属性，更可靠。
- 优先用
transform: translateX()替代left，用opacity替代visibility做显隐过渡 - 给需要过渡的元素加
will-change: transform（仅在必要时，避免滥用）可提前提示浏览器提升图层 - 用 Performance 面板录制操作，查看是否有 long task 挤占了过渡所需的空闲帧
Flex/Grid 容器内子元素 transition 失效？检查是否受布局算法抑制
Flex 或 Grid 容器会主动优化子项的 layout 行为，有时会合并多次样式变更，导致中间状态被跳过。典型表现：给 flex-item 设 flex-basis 并加 transition，但尺寸变化仍是突变。
立即学习“前端免费学习笔记（深入）”；
- 不要直接过渡
flex-basis或grid-column等布局相关简写，改用transform模拟视觉变化 - 确保容器没有设置
contain: layout或content-visibility: auto，这些会隔离子元素的渲染更新流 - 若必须过渡尺寸，可配合
requestAnimationFrame分两步：先强制触发 layout（如读取offsetHeight），再改样式——但这是权宜之计，应优先转向transform
transition，而在变化是否被浏览器识别为「可插值的样式更新」。最常被忽略的是：你以为改了 margin，其实框架悄悄用 transform 覆盖了它；你以为加了 delay，其实是 JS 把渲染帧全占满了。 
