transition 对 width 失效因 auto 无法插值且 display: none 跳过渲染；应改用 max-width、transform 或 visibility+opacity，并避免混用单位及触发重排。
transition 为什么对 width 失效？
直接给 width 加 transition 常常没动画，尤其是从 width: 0 或 width: auto 开始时。因为 auto 不是具体数值，浏览器无法插值；而 display: none 会跳过渲染，transition 完全不触发。
- 别用
width: auto配transition—— 改成固定值（如width: 200px）或用max-width - 避免和
display: none混用；改用visibility: hidden+opacity或height/max-height - 确保元素有明确的起始/结束状态（比如都用 px、em，别混用 % 和 vw）
用 max-width 替代 width 实现响应式伸缩
max-width 能配合 transition 平滑过渡，又保留流式布局弹性，比死磕 width 更适合响应式场景。
- 初始设
max-width: 0，展开时设max-width: 400px（注意：需同时设overflow: hidden） - 在媒体查询中切换
max-width值，比如桌面端max-width: 600px，移动端max-width: 100% - 慎用
%做过渡值 —— 父容器宽度变化时可能中断动画；优先用px、rem或vw
button:hover + .panel {
max-width: 320px;
opacity: 1;
}
.panel {
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 0.3s ease, opacity 0.3s ease;
}
@media 中 transition 会被重置吗？
不会自动重置，但容易误以为失效 —— 因为媒体查询里的样式规则优先级可能覆盖原有 transition，或者新旧状态间缺少可过渡属性。
- 把
transition写在基础选择器里（如.sidebar），不要只写在@media块内 - 不同断点间保持过渡属性一致：比如桌面用
width，移动端别突然改成transform: scaleX()，否则动画断裂 - 用
prefers-reduced-motion降级：加@media (prefers-reduced-motion: reduce)把transition设为0.01s
transition 宽度动画卡顿的常见原因
不是写法错，而是触发了重排（reflow）或非合成层更新，尤其在频繁 resize 或滚动时。
- 避免对
width、height、top等触发 layout 的属性做过渡；优先用transform: scaleX()+origin - 加
will-change: transform提前提示浏览器（但别滥用，可能引发内存开销） - 移动端 Safari 对
max-width过渡支持不稳定，可 fallback 到transform+opacity
max-width 控制伸缩范围，用 transform 做主视觉动效，再用 @media 切换断点阈值 —— 三者不耦合，出问题也容易定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
