用 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></i> 或文字）会瞬间不可见，且无法参与过渡
• 如果侧边栏是 position: fixed，需额外处理 height 和 top，否则折叠后顶部留白

max-width + min-width 是更可靠的方案

用 max-width 替代 width 可让浏览器持续计算内容实际占用空间，动画更顺滑；min-width 则防止折叠后被内部元素撑开。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 展开态：加 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></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 更安全 —— 后者会让屏幕阅读器跳过整个节点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！