width: 100%过渡抖动是因为浏览器无法将不确定的百分比转为像素值导致transition未启动；推荐用max-width+overflow:hidden、transform:scalex()或flex-basis替代，且须确保父容器尺寸稳定。
为什么width: 100%过渡会抖动甚至跳变
不是动画“快”，是浏览器压根没启动 transition。起始值如果是 width: auto 或 width: 100%（而父容器宽未定），浏览器无法把百分比转成确定像素，插值链就断了。DevTools 里能看到 computed width 变了，但 animation timeline 是空的。
用max-width替代width做过渡更可靠
前提是初始值不能是 none，且必须配 overflow: hidden：
- 初始状态写
max-width: 0（不是none），hover 或 active 状态设max-width: 500px（或max-width: 100%，仅当父容器宽度已知且固定） - 务必加
overflow: hidden，否则内容溢出时视觉上像没收缩 - 避免同时改
display：从display: none切到block会清空 transition 流程
用transform: scaleX()实现“占满父容器”的视觉效果
它不触发重排，支持任意起始状态过渡，且兼容性好：
- 初始写
transform: scaleX(0)，hover 写transform: scaleX(1) - 加
transform-origin: left center控制缩放锚点，避免向右拉伸时左边缘偏移 - 子元素文字/边框也会被缩放，如需保持原大小，对子元素加反向缩放：
font-size: calc(1em / 1)（注意匹配 scale 值） - 不要和
width同时设置，否则可能降级为软件渲染
用flex布局+flex-basis过渡更自然
适合在 flex 容器中控制子项宽度变化：
- 父容器设
display: flex，子项初始设flex-basis: 0、flex-grow: 0 - hover 时改
flex-basis: 100%或具体值，并加transition: flex-basis 0.3s linear - 注意：如果父容器本身宽度由内容撑开（如
width: fit-content），子项的100%仍会失效——关键还是父容器要有确定尺寸
最容易被忽略的是：抖动往往不是单一属性问题，而是多个条件叠加失效。比如 max-width 没配 overflow: hidden，或 transform 和 width 同时修改，又或者父容器用了 min-content。先锁定父容器是否“尺寸稳定”，再选过渡属性，比反复调 timing-function 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
