transition 对 width 变化无效的常见原因
直接给 width 加 transition 却没动画？大概率是元素当前 width 是 auto 或受内容撑开，而 auto 无法插值——CSS 动画只支持可计算、可数值化的属性值。
典型表现：div { width: auto; transition: width 0.3s; } + JS 改成 element.style.width = '200px'，结果瞬间跳变，无过渡。
- 确保目标元素有明确的初始
width值（如100px、50%），不能依赖auto - 避免用
display: none切换——它会中断渲染流，transition失效；改用opacity+visibility或max-height - 行内元素（如
span）默认不响应width，需先设display: inline-block或block
用 max-width 替代 width 实现更安全的响应式缩放
当布局依赖媒体查询或容器尺寸变化时，硬写死 width 容易和响应式逻辑冲突；max-width 更柔韧，且支持平滑过渡——只要它本身是确定值（非 none）。
例如侧边栏收起/展开：从 max-width: 240px → max-width: 0，配合 overflow: hidden，视觉上就是宽度收缩动画。
立即学习“前端免费学习笔记（深入）”；
-
max-width和min-width都支持transition，且对弹性容器（flex、grid）更友好 - 设
max-width: 0时，记得同步加opacity: 0和pointer-events: none，否则可能残留点击热区 - 不要依赖
max-width: 0完全隐藏内容——某些字体渲染下仍占微小空间，建议搭配transform: scaleX(0)做视觉补丁
监听 width 变化？别用 transitionend，用 ResizeObserver
transitionend 事件不可靠：它只在 CSS 过渡结束时触发，但 width 可能被 JS 直接修改、被媒体查询覆盖、或因父容器重排中断，导致事件根本不会来。
真正要“感知宽度变化”，尤其是响应式场景下容器尺寸动态调整时，ResizeObserver 是唯一现代、精准、无侵入的方案。
-
ResizeObserver回调参数中可拿到contentRect.width，比读取offsetWidth更及时、不触发回流 - 它不关心变化来源（JS、CSS、窗口缩放），只要盒模型尺寸变，就通知
- 注意兼容性：IE 全系不支持，若需兼容，可用
resize事件监听window+ 节流 + 手动比对offsetWidth，但精度差很多
transition 触发重排的性能隐患
给 width 加 transition 看似简单，但每次动画帧都会强制浏览器计算布局（layout）——尤其当元素有复杂子树或位于滚动区域时，容易掉帧。
真实项目里，宽度动画卡顿往往不是因为写法错，而是没避开重排瓶颈。
- 优先用
transform: scaleX()替代width动画——它走合成层，不触发布局，性能高一个数量级 - 如果必须用
width，确保该元素是position: absolute或fixed，减少对文档流的影响 - 避免在
will-change: width上过度使用——它提前创建图层，但内存开销大，仅对高频动画元素启用
transition，而是判断这个宽度变化是否真该由 CSS 动画承担——有时候，一次 requestAnimationFrame 手动插值，反而比硬套 transition 更可控。 
