width变化不触发transition需确保元素有明确数值宽度（非auto）、写在默认状态而非hover中、行内元素设为block/inline-block；优先用max-width或flex-basis替代width过渡。
width 变化不触发 transition 怎么办
直接给 width 设置 transition 但没效果，大概率是因为元素默认是 display: inline（比如 ）或宽度由内容撑开（如 width: auto）。transition 只对可计算的、明确的数值型 CSS 属性生效，auto 不是具体数值，无法插值。
- 确保目标元素有明确的初始
width值（如width: 100px或width: 20%），不能是auto、fit-content等非数值关键字 - 避免在
display: none状态下触发动画——它会清空渲染树，transition失效；改用visibility: hidden+opacity: 0配合height/width过渡 - 行内元素需先设为
display: inline-block或block，否则width无意义
transition 该写在哪个状态上
必须写在「默认/未激活」状态的 CSS 规则里，而不是只写在 hover 或 class 切换后的规则中。浏览器需要提前知道哪些属性要过渡、持续多久，才能在状态变化时启动插值。
button {
width: 120px;
transition: width 0.3s ease; /* ✅ 写在这里 */
}
button:hover {
width: 200px; /* ❌ 不要只在这里写 transition */
}- 如果多个属性都要过渡，可以写成
transition: width 0.3s, opacity 0.2s - 慎用
transition: all 0.3s——可能意外过渡不需要的属性（比如box-shadow、color），影响性能和可维护性 - 过渡函数推荐用
ease-in-out或cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更自然
用 max-width 模拟 width 过渡更稳妥
当原始宽度不确定（比如响应式容器、文字长度动态变化），硬设 width 值不现实。此时用 max-width 替代是常见解法：给一个足够大的上限值，再配合 overflow: hidden，视觉上等效于宽度伸缩。
.accordion-panel {
max-width: 0;
overflow: hidden;
transition: max-width 0.4s ease-out;
}
.accordion-panel.open {
max-width: 500px; /* 要大于内容实际所需最大宽度 */
}-
max-width支持从0到具体数值的过渡，且兼容性比width更好 - 注意设定的
max-width上限不能太小，否则内容被截断；也不宜过大（如9999px），可能影响布局重排精度 - 若需完全自适应，可用 JS 先读取
scrollWidth，再设为max-width，但会多一次回流
flex 容器里 width 过渡经常失效的原因
在 display: flex 的父容器中，子项的 width 常被 flex-basis、flex-grow 覆盖。直接改 width 很可能被忽略。
立即学习“前端免费学习笔记（深入）”；
- 优先改
flex-basis：它控制主轴初始尺寸，且支持 transition - 示例：
transition: flex-basis 0.25s; flex-basis: 100px;→flex-basis: 200px; - 若同时用了
flex: 1，记得显式重置为flex: 0 1 auto，避免flex-grow: 1强制拉伸覆盖过渡 - 不要依赖
width在 flex 项上做动画，它不是主轴尺寸的权威来源
过渡真正起作用的前提，是浏览器能稳定获取起始和结束两个确定的数值。任何依赖布局计算（如 auto、min-content）、或被其他布局机制（flex/grid 的尺寸分配逻辑）覆盖的宽度设置，都会让 transition “看起来没反应”。
