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）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 务必加 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 或换单位都没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！