height: auto 无法过渡是因为浏览器需要确定数值插值，auto 非数值；应通过 JS 获取真实高度并写入 CSS 变量，再用 clip-path 或 height 结合 transition 实现平滑动画。
不能直接用 height: auto 做 transition 动画，但可以用 CSS 变量把真实高度“透传”进动画逻辑里——关键不是存值，而是让 JS 计算后能被 CSS 的 transition 或 @keyframes 实时读取。
为什么 height: auto 无法过渡
CSS 过渡引擎需要两个确定的数值才能插值，auto 不是数值，浏览器无法计算中间帧。尝试写 transition: height 0.3s + height: auto，动画会直接跳变，不触发任何过渡。
常见错误现象：
- 加了
transition但内容展开/收起仍是“啪”一下出现或消失 - 用
max-height时设了1000px，结果短内容收缩过快、长内容被截断 - JS 改了
style.height，但没同步更新overflow或没清缓动函数，导致布局抖动
用 getBoundingClientRect().height + CSS 变量动态绑定
核心思路：每次选项卡切换后，用 JS 精确读取目标 .panel 的渲染高度，写入 CSS 变量，再让 CSS 动画基于该变量做位移或裁剪。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在选项卡激活后，立即调用
panel.getBoundingClientRect().height（注意：需确保 panel 已 render 且未被display: none隐藏） - 将结果写入
:root或父容器的自定义属性，例如：panel.parentElement.style.setProperty('--panel-height', `${h}px`) - CSS 中用
height: var(--panel-height)或clip-path: polygon(0 0, 100% 0, 100% var(--panel-height), 0 var(--panel-height))配合transition - 不要在 JS 中直接设
panel.style.height后再过渡——这会触发 layout，且无法和 CSS 变量联动
clip-path 方案比 max-height 更稳
clip-path 的百分比/像素值可被 transition，且裁剪区域完全跟随元素实际尺寸，无需预估上限。
示例片段：
.panel {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: opacity 0.25s, clip-path 0.25s;
}
.panel.active {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
⚠️ 注意点：
-
clip-path在旧版 Safari（≤15.6）需加-webkit-clip-path - 若 panel 内有绝对定位子元素，需确保其
top/bottom不超出裁剪区，否则会被意外隐藏 - 不要混用
clip-path和transform: scaleY()，后者会破坏文字清晰度
滚动或字体加载后高度变化怎么办
如果选项卡内容含图片、异步文本、或 Web Font 加载完成前占位高度不准，getBoundingClientRect() 初次读取可能偏小。
可靠做法：
- 监听
img的load事件，或用fontFaceSet.load()等待字体就绪 - 对 panel 使用
ResizeObserver，一旦内容重排就刷新 CSS 变量：ro.observe(panel) - 避免在
scroll事件中高频重算——加防抖，或只在选项卡激活后一次性计算
真正容易被忽略的是：CSS 变量本身不触发重排，但它的值被用于 height 或 clip-path 时，浏览器必须重新计算布局。所以别在每帧都改变量，只在内容确定稳定后写一次。
