侧边栏width过渡卡顿或不触发，根本原因是未设明确初始值；须用具体数值（如240px→60px），禁用auto；推荐width+transform:scaleX()配合，transition同步声明，注意设置顺序及overflow、flex布局适配。
width过渡动画卡顿或不触发？检查是否设了初始值
CSS里用 width 做侧边栏折叠，最常见问题是动画不动、跳变，或者只缩不展。根本原因往往是没给元素一个明确的初始 width 值——比如写成 width: auto 或者依赖内容撑开，浏览器无法计算过渡起点。
- 必须显式设置初始
width（如width: 240px），折叠态也得是具体数值（如width: 60px），不能用auto或fit-content - 如果侧边栏内容宽度不固定，别硬靠
width过渡，改用transform: scaleX()更稳妥 - 注意：
overflow: hidden得加在父容器或自身上，否则缩小时内容会溢出
transform: scaleX() 怎么配 width 一起用？
单用 transform: scaleX() 能避免重排，性能好，但它不占布局空间——折叠后旁边的主内容不会自动“挤”过去。所以实际项目里常要两者配合：
- 折叠时同步改
width（收缩布局空间） +transform: scaleX()（做视觉压缩动画） - 推荐写法：
width控制布局，transform控制形变，用同一个transition声明：transition: width 0.3s ease, transform 0.3s ease;
- 注意顺序：先设
width，再设transform，否则 Safari 可能丢掉transform动画 - 不要对
transform: scaleX(0)做交互（比如 hover 展开），0 倍缩放会让内部按钮失焦、点击失效
折叠后文字被裁切？flex 或 overflow 没处理干净
侧边栏收窄后图标还在、文字消失，不是动画问题，而是布局没随宽度动态调整：
- 文字容器别用固定
min-width或white-space: nowrap，否则缩到 60px 时直接溢出或隐藏 - 推荐用
flex布局 +flex-shrink: 1让文字区域自动收缩；图标区域设flex-shrink: 0 - 如果用
transform: scaleX()，记得同时控制opacity或visibility，否则缩到极小仍可能响应鼠标事件 - 测试点：鼠标移到折叠后的窄条上，看是否还能触发
:hover或点击——若能，说明transform没影响命中框，但视觉上已不可见，体验割裂
侧边栏动画看着简单，真正难的是宽度变化时布局、交互、可访问性的连带影响。尤其 transform 和 width 混用时，不同浏览器对“何时触发重绘”“是否保留点击区域”的处理并不一致，建议在 Chrome、Firefox、Safari 都跑一遍 hover + 点击 + 键盘焦点链。
立即学习“前端免费学习笔记（深入）”；
