width transition 默认不生效是因为浏览器无法对 auto 或不可计算的 width 值进行插值；必须显式设置起始/结束数值（如 240px→0），配合 overflow: hidden 和 flex-basis 替代方案，并注意 Safari 渲染残留、opacity 同步及 pointer-events 时机。
width transition 为什么默认不生效
直接给 width 加 transition，但菜单一收就“啪”一下消失，根本没动画——这不是你写错了，是 CSS 对 width 的过渡有隐含前提：width 必须是可计算的、明确的数值。如果元素初始 width 是 auto，或者父容器限制不清晰，浏览器无法插值，transition 就直接跳变。
常见错误场景：侧边栏用 display: none 切换、或依赖 visibility: hidden + width: 0 却没设 overflow: hidden，导致内容溢出撑开布局，动画卡顿甚至失效。
- 必须显式设置起始和结束的
width值（比如width: 240px→width: 0），不能依赖auto - 配合
overflow: hidden，否则文字或子元素可能在收缩过程中“露出来” - 避免同时操作
display和width，display: none会强制中断 transition
如何让 width 过渡真正平滑（含 flex 场景）
纯 width 过渡在 flex 容器里尤其容易翻车——flex 项默认有 min-width: auto，会抵抗 width: 0。这时候光调 width 没用，得配合 flex 相关属性压制。
实操建议优先走「宽度 + flex 控制」双保险：
立即学习“前端免费学习笔记（深入）”；
- 给侧边栏加
flex: 0 0 240px（即flex-grow: 0; flex-shrink: 0; flex-basis: 240px），再过渡flex-basis，比只动width更稳 - 隐藏时设为
flex: 0 0 0，并确保父容器是display: flex且无min-width干扰 - 若必须用
width，记得重置min-width: 0和max-width: 0，防止 flex 默认行为劫持
示例关键样式：
.sidebar {
flex: 0 0 240px;
transition: flex-basis 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.sidebar.collapsed {
flex-basis: 0;
opacity: 0;
overflow: hidden;
}
opacity + width 组合动画的时机陷阱
很多人想“先缩宽度，再淡出”，或者反过来，结果发现 opacity 和 width 虽然都写了 transition，但动画不同步——这是因为它们的 timing function 或 duration 稍有差异，人眼立刻能感知错位。
更麻烦的是：如果用 opacity: 0 后立刻 pointer-events: none，鼠标可能在动画中途就失去响应，导致点击穿透或交互断层。
- 统一 duration 和 timing function，比如全用
0.25s ease-in-out - 如果要分阶段，别靠 CSS 自己猜顺序，改用 JavaScript 控制类名切换节奏（比如
setTimeout或transitionend事件） - 需要禁用交互时，别急着加
pointer-events: none，等transitionend触发后再设，避免中间态误操作
移动端 Safari 的 width transition 兼容细节
Safari（尤其是 iOS 15–16）对 width 从非零到 0 的 transition 有渲染优化 Bug：动画末尾可能出现 1px 残留或闪烁，尤其在使用 transform: translateZ(0) 强制硬件加速后更明显。
这不是性能问题，是渲染管线对 layout 变化的处理偏差。绕过方式很具体：
- 把
width: 0改成width: 1px，视觉上无差别，但 Safari 渲染更稳定 - 加
will-change: width在展开/收缩前一刻（用 JS 动态加），不要常驻，否则影响滚动性能 - 避免在
position: fixed侧边栏上直接 transitionwidth，改用transform: translateX()更稳妥（虽然这不是原题要求，但现实里经常要妥协）
overflow: hidden 没跟 width 同步开关——收缩动画看着在动，但内部按钮还点得着，或者滚动条卡在半路。这个细节不报错，但会让整个交互显得“不真实”。 
