侧边菜单伸缩不能仅靠width+transition，因width:0时padding/border仍占空间且内容被裁切；应使用flex-basis配合min-width:0、overflow-x:hidden及transform控制显隐，并用CSS变量和classList.toggle实现平滑切换。
侧边菜单伸缩为什么不能只靠 width + transition
直接对 width 设置 transition 在收缩到 0 时，内部文字、图标会突然被裁切，且子菜单展开箭头、hover 区域也会失效——因为布局已坍缩。更关键的是，width: 0 时 padding 和 border 仍占空间，视觉上“没缩干净”。Flex 布局本身不解决这个问题，真正起作用的是配合 flex-shrink、overflow 和一个隐藏锚点。
用 flex 控制主容器宽度，而非直接改菜单元素 width
把侧边栏设为 flex 容器的子项（比如 .sidebar），通过控制它的 flex-basis 和 flex-shrink 实现平滑伸缩，同时保持内部内容流式渲染。关键点：
-
.sidebar设flex: 0 0 var(--sidebar-width)，初始值如240px；收缩时改为flex: 0 0 64px（仅留图标） - 必须配
min-width: 0，否则 flex 项默认不收缩到小于内容宽度（尤其含文字时） - 用 CSS 变量统一管理宽度值，方便 JS 切换：
--sidebar-width: 240px/--sidebar-collapsed-width: 64px - 不要给
.sidebar设width，否则会覆盖flex-basis
.sidebar {
flex: 0 0 var(--sidebar-width);
min-width: 0;
overflow-x: hidden;
transition: flex-basis 0.3s ease, padding 0.3s ease;
}
.sidebar.collapsed {
flex-basis: var(--sidebar-collapsed-width);
padding: 8px 0;
}
文字和图标如何随伸缩状态自动显隐
不能靠 display: none（会破坏 transition），也不能只靠 opacity（点击区域还在）。正确做法是结合 overflow + white-space + transform：
- 菜单项文字包裹在
中，收缩时设overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 图标用
或::before，始终显示；文字层加transform: scaleX(0)并过渡，比width更稳定 - 子菜单箭头（如
.arrow）用opacity: 0+pointer-events: none配合 transition，避免误触
.menu-text {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.3s ease;
}
.sidebar.collapsed .menu-text {
transform: scaleX(0);
}
.sidebar.collapsed .arrow {
opacity: 0;
pointer-events: none;
}
JS 切换时为什么推荐用 classList.toggle() 而非内联样式
内联样式优先级高于 CSS 文件中的 transition 声明，容易导致动画失效；且无法利用 CSS 变量做主题适配。实际开发中：
- 绑定按钮 click 事件，执行
document.body.classList.toggle('sidebar-collapsed')（或操作.sidebar元素） - 在 CSS 中写
body.sidebar-collapsed .sidebar选择器，避免 JS 操作 DOM 结构 - 如果需记忆用户偏好，用
localStorage读写状态，但注意首次渲染时 JS 还未执行，CSS 应有默认态（如不加collapsed类即展开） - 移动端需额外处理：折叠后点击遮罩层收起菜单，此时要监听
click并移除类，不能只依赖 toggle
最易忽略的是 min-width: 0 和 overflow-x: hidden 的组合——少了前者，flex 项死活缩不进 64px；少了后者，横向滚动条会在收缩时闪一下。这两个声明看着不起眼，却是动画是否“干净”的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
