width动画在侧边栏中大概率失效，根本原因是未处理好flex布局中flex-basis对width的覆盖、未显式设置min-width:0导致无法压缩、未加overflow:hidden引发内容溢出，三者缺一不可。
width 动画在侧边栏里大概率失效，不是你写错了，而是没处理好 flex 布局、min-width 和 overflow 这三件事。
为什么 width 过渡常“不动”或“跳变”
浏览器无法对 auto 或未声明的初始值做过渡——比如 .sidebar { width: auto; }，后面加 transition: width 0.3s 是无效的。
必须显式设初始值：width: 240px（展开态）→width: 60px（折叠态），不能用 fit-content 或 max-content。
如果父容器是 display: flex，width 会被 flex-basis 覆盖，此时改 flex-basis 才真正生效。
没设 min-width: 0 时，flex 项默认按内容最小宽度撑开，width: 60px 会被忽略。
必须配上的两个 CSS 属性：overflow 和 min-width
只写 width + transition，收起后文字/图标大概率还露在外面，或者根本压不下去。overflow: hidden 要加在侧边栏自身上，否则缩窄后内容会溢出边界。min-width: 0 必须显式声明，否则 flex 子项会固守“至少显示文字宽度”的行为。
过渡要包含 overflow：transition: width 0.3s ease, overflow 0.3s ease，否则收起瞬间会闪一下。
避免 width: 0——它会让子元素布局崩溃（尤其含 flex 或 inline-block 的菜单项），用 width: 60px（图标区宽度）更稳。
width 动画和主内容区联动的坑
主内容区靠 margin-left 跟随侧边栏宽度变化，看似简单，但容易错位或重排失效。
不要用 flex: 1 让主区自动填满——width 变化时它不会响应式重分配空间。
主区用 margin-left 配合 transition：.main-content { margin-left: 240px; transition: margin-left 0.3s ease; }。
折叠类要精准作用于兄弟元素：.sidebar.collapsed ~ .main-content { margin-left: 60px; }，注意选择器层级。
若侧边栏是 position: fixed，主区就得用 padding-left 替代 margin-left，否则 fixed 元素不占文档流。
什么情况下还能勉强用 width 动画
不是完全不能用，但适用场景极窄：
结构越简单、越少依赖 flex/grid、越不需要键盘焦点和屏幕阅读器支持，越可能成功。
HTML 结构是普通 <div> 包裹图标，没有 display: flex 或 grid 子容器。
用媒体查询控制，比如 @media (max-width: 768px) { .sidebar { width: 60px; } }，而非 JS 切类名。
主内容区不能依赖 flex: 1 自动填满——得用 margin-left: 60px 配合动画，否则宽度变化后主区不会重排。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是怎么写width，而是折叠后子菜单是否可聚焦、Tab 键能否进入、屏幕阅读器是否能播报状态——这些细节漏掉，用户一用就卡住。 
