width: 100%过渡跳变因浏览器无法将不确定百分比转为像素值导致transition未启动；应改用max-width/transform/flex-basis等可插值属性，并确保父容器尺寸稳定。
为什么width: 100%过渡会直接跳变
不是动画“太快”，是浏览器压根没启动 transition。起始值如果是 width: auto 或 width: 100%（而父容器宽度未定），浏览器无法把百分比转成确定像素，插值链就断了。DevTools 里能看到 computed width 变了，但 animation timeline 是空的。
用max-width替代width必须配overflow: hidden
初始状态写 max-width: 0（不能是 none），hover 或 active 状态设 max-width: 100%（仅当父容器宽度已知且固定）或具体像素值（如 max-width: 500px）。
- 务必加
overflow: hidden，否则内容溢出时视觉上像没收缩 - 避免同时改
display：从display: none切到block会清空transition流程 - 初始值不能是
max-width: none——none不可插值，必须用0或具体数值
transform: scaleX()不触发重排，但要注意锚点和子元素
初始写 transform: scaleX(0)，hover 写 transform: scaleX(1)，加 transform-origin: left center 控制缩放原点，避免左边缘偏移。
- 子元素文字/边框也会被缩放；如需保持原大小，对子元素加反向缩放：
font-size: calc(1em / 1)（注意匹配 scale 值） - 不要和
width同时设置，否则可能降级为软件渲染 -
transform不改变文档流，点击区域和内部换行行为会变化，需实测验证
flex-basis过渡更自然，但依赖父容器尺寸稳定
适合在 display: flex 容器中控制子项宽度变化：父容器设 display: flex，子项初始设 flex-basis: 0、flex-grow: 0，hover 时改 flex-basis: 100% 或具体值，并加 transition: flex-basis 0.3s linear。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器本身宽度由内容撑开（如
width: fit-content），子项的100%仍会失效 - 推荐显式写
flex: 0 0 33.333%替代width: 33.333%，避免flex-shrink: 1干扰 - 过渡抖动往往不是单一属性问题，而是多个条件叠加失效 —— 先锁定父容器是否“尺寸稳定”，再选过渡属性
min-content、fit-content 或未设宽，导致其自身也在变，连带让子元素的百分比失去锚点。这时候调 timing-function 或换单位都没用。 
