transition不能直接过渡width/height的auto值，因auto不可插值；应改用max-width/max-height、transform或JS读取offsetWidth/Height后设具体像素值实现平滑过渡。
transition 不能直接过渡 width/height 的“auto”值
当你写 transition: width 0.3s ease; 并试图从 width: auto 动画到具体像素值（比如 width: 200px），动画根本不会触发——浏览器无法计算 auto 对应的起始数值，直接跳变。
解决思路是避开 auto，用可计算的替代方案：
- 用
max-width替代width：设初始max-width: 0，展开时设为足够大的固定值（如max-width: 500px），配合overflow: hidden - 用
transform: scaleX()模拟水平缩放，它天然支持auto容器内的平滑缩放（但注意会缩放内容本身） - 用 JavaScript 先读取真实宽度（
offsetWidth），再设置width为该像素值，最后触发动画（适合动态内容）
box-sizing 会影响 transition 的实际行为
如果元素用了 box-sizing: content-box（默认），width 只控制内容区，而 padding 和 border 会额外撑开尺寸；若用 box-sizing: border-box，width 就是总宽。这两者混用时，transition 表现可能和预期不符。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一所有参与动画的元素使用
box-sizing: border-box（现代项目基本都该这么设） - 避免在 transition 中同时动
width和padding，否则尺寸变化逻辑叠加，容易卡顿或抖动 - 若必须动内边距，优先考虑
transform: scale()或clip-path等不触发重排的方式
transition 不会自动过渡 display 属性
display: none → display: block 的切换会直接显示/隐藏，没有任何过渡效果。这不是 bug，而是 CSS 规范明确规定的：display 是离散属性，不可插值。
常见应对方式：
- 用
opacity+visibility组合：先设opacity: 0; visibility: hidden;，动画opacity，结束时用transitionend事件清理visibility - 用
max-height+overflow: hidden模拟折叠/展开（适合已知最大高度的场景） - 用
transform: scaleY(0)配合transform-origin: top实现垂直收起，比 height 更高效
性能敏感点：避免 layout-triggering 的 transition 属性
像 width、height、top、left 这类属性会频繁触发浏览器重排（layout），尤其在复杂 DOM 下，动画容易掉帧。
更优选择是只动合成层属性：
- 优先用
transform（translateX、scaleY、rotate）和opacity，它们由 GPU 加速，不触发重排 - 必要时给元素加
will-change: transform;（但别滥用，仅用于真正需要过渡的元素） - 检查 DevTools 的 Rendering 面板，开启 “Paint flashing”，确认动画区域是否频繁重绘
auto 值、display 切换和重排属性这三类。 
