用 max-width + min-width 替代 width 实现折叠更可靠，因 width 在 flex 中易被忽略导致跳变；需配合 overflow: hidden、opacity 过渡及 aria-label 保障可访问性。
width + transition 实现折叠是可行的，但容易在 flex 布局或内容撑开时失效；更稳的做法是用 max-width 锁定收缩区间，并配合 overflow: hidden 和子元素显隐控制。
为什么 width 过渡经常跳变？
常见现象：点击折叠按钮后侧边栏“啪”一下消失，没动画，或文字突然裁切、图标错位。根本原因是：width 在 flex 容器中可能被忽略，尤其当子元素有最小尺寸（如图标容器设了 min-width）、或父级用了 flex-shrink: 0 时，浏览器会跳过 width 过渡，直接重排布局。
- 不要只依赖
transition-all—— 它对width的过渡支持不稳定 - 避免设
width: 0—— 子元素（如<i>或文字）会瞬间不可见，且无法参与过渡 - 如果侧边栏是
position: fixed，需额外处理height和top，否则折叠后顶部留白
max-width + min-width 是更可靠的方案
用 max-width 替代 width 可让浏览器持续计算内容实际占用空间，动画更顺滑；min-width 则防止折叠后被内部元素撑开。
- 展开态：加
min-w-[200px] max-w-[200px]（Tailwind）或min-width: 200px; max-width: 200px;（原生 CSS） - 折叠态：改
max-w-[64px]，同时确保min-w-[64px]—— 图标区域不会塌缩，文字自然被裁掉 - 必须配
overflow: hidden，否则长文本会溢出窄宽度 - 过渡声明要明确：
transition: max-width 0.3s ease-in-out, min-width 0.3s ease-in-out
文字隐藏不能只靠 display: none
单纯切换 display: none 会导致布局突变、屏幕阅读器跳过菜单项，且无法和宽度动画同步。
- 推荐组合：
opacity: 0+max-width: 0+margin-left: -10px（配合transition） - 文字容器（如
<span>）设white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 图标用内联 SVG 或字体图标（如
<i class="icon-home"></i>），别用background-image—— 缩放时尺寸难统一 - 折叠时给文字加
pointer-events: none，避免残留点击热区
主内容区如何同步响应？
只动侧边栏宽度，主内容区不跟着变，就会留白或重叠。关键不是“推内容”，而是“释放空间”。
立即学习“前端免费学习笔记（深入）”；
- 若用 flex 布局：
.content { flex: 1; }，侧边栏设flex-shrink: 0，它收缩时自动释放空间 - 若用 margin 控制：
.content { margin-left: 200px; transition: margin-left 0.3s ease; }，折叠时切到margin-left: 64px - 绝对定位侧边栏时，主内容区需用
left+width配合 transition，而非仅靠 margin - 别用
transform: translateX()模拟折叠 —— 元素仍占原始空间，Flex 不会重分配
aria-label 补充语义，且 opacity: 0 比 visibility: hidden 更安全 —— 后者会让屏幕阅读器跳过整个节点。 
