transition 对 width: 50% 不生效，是因为初始值为 auto 无法插值；需显式设置可过渡的起始宽度（如 width: 0 或具体像素值），或改用 max-width、calc()（前提是参照物尺寸确定）、Grid 布局或 transform 替代。
transition 对 width: 50% 不生效，是因为没设初始值
百分比宽度本身没问题，但 transition 要求被过渡的属性在「变化前」有明确的、可计算的起始值。如果元素默认是 width: auto（比如 <div> 未设宽），那 <code>width: 50% 就不是“从 A 变到 B”，而是“从 auto 变到 50%”——而 auto 无法插值，浏览器直接跳变。
解决方法不是换单位，而是补上可过渡的起点：
- 给元素显式声明初始
width，例如width: 100px或width: 0，再在状态中改成width: 50% - 或统一用
max-width过渡：初始设max-width: 0，状态中设max-width: 300px（注意需配overflow: hidden） - 避免依赖
transition: all—— 它不保证width在百分比场景下被正确识别，应写明transition: width 0.3s
calc() 能绕过百分比失效，但要注意计算上下文
calc() 本身不解决 transition 失效，但它能把“相对计算”转成“浏览器可插值的绝对值表达”，前提是参与计算的每个部分都有确定值。比如：
.box {
width: calc(50% - 20px); /* 有效，前提是父容器宽度确定 */
transition: width 0.3s;
}
.box.expanded {
width: calc(100% - 20px);
}但如果父容器宽是 auto 或由内容撑开，50% 在 calc() 里依然无意义，transition 还是不动。所以关键仍是确保 % 的参照物有明确尺寸。
立即学习“前端免费学习笔记（深入）”；
- 常见误用：
width: calc(100% + 1em)放在 inline 元素里 →width本就不生效，calc()白搭 - 移动端慎用
vh嵌套在calc()中：Safari 地址栏收放会导致100vh突变，calc(100vh - 60px)可能闪退 - 更稳的替代：用
100dvh（如支持）或 JS 监听resize动态设内联样式
Grid 布局让百分比高度/宽度过渡更可控
百分比高度（height: 80%）比宽度更容易失效，因为块级元素默认高度由内容决定。Grid 把“设高”这件事从父元素转移到容器自身，规避了层层依赖：
.container {
display: grid;
height: 400px; /* 关键：容器自己有明确高度 */
grid-template-rows: 1fr 2fr; /* 子项按比例分高，天然可过渡 */
}
.item {
transition: grid-row-start 0.3s;
}
.item.expanded {
grid-row-start: 1;
grid-row-end: -1;
}- Grid 中的
grid-row/grid-column是离散值，不能直接过渡；但grid-row-start等可以（Chrome/Firefox 支持，Safari 需测试） - 更通用做法：用
transform: scaleY()替代height过渡，它不依赖父高，且硬件加速 - 若必须动高度，优先用
max-height+overflow: hidden，而非height: 0 → height: 200px
真正容易被忽略的点：transition 触发时机和重排
即使写了 transition: width 0.3s 且初始值明确，JS 动态改宽仍可能瞬变。这是因为浏览器把连续样式修改合并渲染，跳过了中间帧。
- 典型陷阱：
el.classList.add('expanded');后立刻读取offsetHeight，但没在 class 切换后强制重排 - 修复方式：加一行
void el.offsetHeight;强制同步计算，再改状态 - Flex/Grid 容器中的子项，若同时设了
flex: 1和width: 50%，后者会被 flex 计算覆盖，transition实际作用在 flex 分配后的结果上，难以预期
