最稳妥方案是 width + transition，但需配合 overflow: hidden 和 box-sizing: border-box；常见失效原因包括 min-width: auto 撑宽、未设 border-box 导致尺寸偏差、父容器 flex 简写覆盖 width 控制权。
直接用 width + transition 最稳妥，但必须配 overflow: hidden 和显式 box-sizing: border-box，否则动画会卡顿或撑开。
为什么 width 动画容易失效
常见错误是只写 transition: width 0.3s，却忽略三点：
- 侧边栏内部元素（比如
ul、图标容器）默认有min-width: auto，会强行撑宽，导致width改了但视觉没变 - 没设
box-sizing: border-box，padding和border会额外加在width外，终点宽度比预期多出几十像素 - 父容器不是
display: flex或用了flex: 1等简写，间接覆盖了width的控制权
用 transform: translateX() 替代 width 的场景
当侧边栏用 position: fixed 或 absolute 定位时，transform 是更优选择——它不触发重排，动画更流畅，尤其在低端设备上。
- 展开状态：
transform: translateX(0) - 收缩状态：
transform: translateX(-240px)（数值要和实际宽度一致） - 必须搭配
transition: transform 0.3s ease，不能混写width或left - 注意
z-index，收缩后仍需保证遮罩层或主内容能正常交互
flex-basis 动画的坑比想象中多
想用 Flex 布局控制侧边栏宽度？先确认父容器已设 display: flex 和 flex-direction: row，再检查以下问题：
-
flex-basis初始值不能是auto，必须显式写成flex-basis: 240px - 目标状态也不能用
content或fit-content，得是同单位数值，比如flex-basis: 64px - 侧边栏自身不能有
width冲突，否则flex-basis被无视 - 务必加
min-width: 0，否则内部文本或图标会阻止宽度真正缩小
最易被忽略的是：动画是否在移动端触发后还能正确响应点击。比如用 :target 实现纯 CSS 展开，URL 锚点变化可能干扰路由；用 checkbox 模拟开关，则需确保 label 点击区域足够大，避免触控误操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
