width过渡需起始值与结束值均可计算，禁用auto/flex等不可算值；应写在常态元素上，用类切换而非内联样式；性能敏感时优先用transform替代；transitionend需校验propertyname并防中断。
transition 能实现宽度变化的平滑过渡，但直接写 width 很容易卡顿或失效——关键不在“怎么写”，而在“怎么触发”和“怎么避免陷阱”。
width 过渡必须满足可计算起始值与结束值
浏览器无法对 width: auto 或 width: fit-content 做过渡，因为这些值不可计算（没有确定像素值）。如果你写了 transition: width 0.3s 却没动，大概率是其中一端是 auto。
- ✅ 正确：从
width: 100px→width: 200px，或width: 0→width: 300px - ❌ 错误：从
width: auto→width: 300px，或width: 100%→width: auto（百分比在父容器未定高/宽时也可能退化为不可算） - ? 替代方案：若需响应式宽度过渡，优先用
max-width配合overflow: hidden，起始设max-width: 0，结束设足够大的固定值（如max-width: 500px）
transition 写在哪个元素上？什么时候加类？
过渡样式必须写在「常态元素」上，不是 hover 或 active 状态里；且新旧值要分两帧设置，否则浏览器会跳过重排直接渲染终态。
- ✅ 正确写法：
.box { width: 100px; transition: width 0.3s ease; } .box.expanded { width: 200px; }，再用 JS 切换expanded类 - ❌ 错误写法：只在
.box:hover里写transition，或 JS 中el.style.width = '200px'后立刻el.classList.add('expanded')（没留重排机会） - ? 补救技巧：切换类前加一句
el.offsetWidth（强制同步读取布局），让浏览器“记住旧值”
性能敏感场景请改用 transform 缩放替代 width
修改 width 会触发 layout（重排），而 transform: scaleX() 只走合成层，更顺滑，尤其在动画频繁或容器内有复杂子元素时。
- ✅ 推荐：用
transform: scaleX(1)→transform: scaleX(2)模拟宽度翻倍，配合transform-origin: left控制缩放基点 - ⚠️ 注意：缩放会影响内部文字/子元素比例，若需保持内容清晰，得额外用
transform: scale(0.5)反向缩放子元素（慎用，嵌套深易出错） - ? 兼容性：
transform在所有现代浏览器中无前缀支持，IE10+ 也 OK；width过渡则在老 Android WebView 中偶有渲染撕裂
transitionend 事件监听不到？检查是否被合并或中断
transitionend 不是“动画播完就触发”，它只在 CSS 过渡自然结束时触发。常见静默失败原因：
- ❌ 过渡中途被新样式覆盖（比如 hover 未离开就点击了按钮，又设了一次
width）→ 旧过渡取消，不发事件 - ❌ 元素被移除 DOM 或设了
display: none→ 浏览器直接丢弃过渡流程 - ✅ 安全监听写法：
el.addEventListener('transitionend', handler, { once: true })，并在 handler 中校验e.propertyName === 'width'，避免其他属性干扰
transition: width 0.3s，而是确保浏览器能“看到变化的起点”，并“愿意为你重排一次”。很多失效，都卡在 DOM 更新节奏和样式计算时机之间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
