CSS过渡百分比问题，用calc或Grid解决

解决方法不是换单位，而是补上可过渡的起点：

• 给元素显式声明初始 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 分配后的结果上，难以预期

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS过渡百分比问题，用calc或Grid解决》文章吧，也可关注golang学习网公众号了解相关技术文章。