transition不生效的根本原因是width无明确初始值或transition未写在非:hover规则中；须设width:0、overflow:hidden、transition在常态下声明，并避免display切换及IE11兼容问题。
hover时侧边栏宽度从0变200px，transition不生效？
常见现象是鼠标移上去没动画、直接闪现，或者动效卡顿。根本原因通常是transition没作用在可动画的属性上，或初始状态被其他样式覆盖。
必须确保：width有明确的初始值（不能是auto或unset），且transition写在非:hover规则里：
aside {
width: 0;
overflow: hidden;
transition: width 0.3s ease; /* 必须放这里，不能只写在:hover里 */
}
aside:hover {
width: 200px;
}-
overflow: hidden要加，否则内容会撑开容器导致宽度“跳变” - 别用
display: none配合display: block——display不可动画，transition直接失效 - 如果父容器有
flex布局，注意flex-shrink: 0，否则宽度变化时可能被压缩
移动端触摸设备上hover不触发？
真机上:hover在iOS/Android默认不响应触摸，不是bug，是规范行为。想让侧边栏在手机上也能展开，得换交互逻辑。
纯CSS方案有限：可用:focus-within配合一个隐藏的<input type="checkbox">，点击触发；但更稳妥是加轻量JS监听click并切换class：
立即学习“前端免费学习笔记（深入）”；
.sidebar { width: 0; }
.sidebar.active { width: 200px; }- 别依赖
ontouchstart模拟hover，兼容性差，且PC端又多出一次误触 - 如果用
checkbox+label，记得label的for和id严格匹配，否则点击无效 - 过渡时间建议设
0.25s–0.35s，太短感知不到，太长像卡顿
侧边栏内容文字在缩放时模糊或错位？
当width从0→200px变化时，如果内部有font-size用rem或%，或用了transform: scale()，可能因重排重绘不同步导致文字渲染异常。
关键控制点：
- 避免对
aside本身用transform做展开——它绕过文档流，容易和width动画冲突 - 如果内容含图片，给
img加max-width: 100%和height: auto，防止溢出或拉伸 - 字体别用
vw单位，缩放时会和容器宽度耦合，造成抖动
IE11或旧版Edge下transition卡顿甚至失效？
IE11对width过渡支持弱，尤其当父容器有flex或position: absolute时，常出现“一步到位”无动画。这不是bug，是渲染引擎限制。
可行解法只有两个方向：
- 降级为
transform: translateX()+opacity，用硬件加速（但需改结构，侧边栏得脱离文档流） - 彻底放弃IE11的过渡效果，用
@supports (transition: width 0.1s)做特性检测，只给现代浏览器加动画 - 若必须兼容，优先保证功能可用（能展开/收起），动画作为增强，而非核心路径
最易被忽略的是：动画性能不只看transition写得对不对，更取决于是否触发了重排——只要width变化影响兄弟元素布局，哪怕只动1px，都可能让整个区域重绘。所以overflow: hidden和flex-shrink: 0不是可选项，是必选项。
