1. 问题定位与目标
1.1 高度变化为何引发布局跳动
布局跳动的本质在于文档流中元素高度的突变会重新排列相邻元素的位置，导致整屏内容从一个高度状态瞬间切换到另一个状态，给用户造成视觉冲击和交互不连贯的体验。
当一个区域需要在显示与隐藏之间切换时，若直接将高度设为 auto，浏览器难以为动画提供可预测的起止点，从而出现跳动或闪烁现象。
1.2 将需求落地为“柔和伸缩显示”的目标
为了实现无缝的高度过渡，需要把“显示/隐藏”的动作转化为可控的物理高度变化，并在结束时回到自适应布局状态。
本节的目标是在不破坏内容结构与可访问性的前提下，提供一个可重复使用的方案来降低布局跳动的感知强度。
2. transition-height 的核心思路与误区
2.1 什么是 transition-height 的核心思路
核心思路并非真正存在的 CSS 属性 transition-height，而是通过对高度进行显式控制实现“高度渐变”的效果，通常可分为两类实现：纯 CSS 的 max-height 方案，以及结合 JavaScript 获取真实高度的方案。
在纯 CSS 方案中，使用一个足够大的 max-height 作为上限，通过切换 overflow 与 opacity 等属性来模拟伸缩。
2.2 常见误区与应对
误区一：直接给 height 设为 0 与 auto 并使用 transition，这是不可行的，因为 height 的起止点不具备明确的数值。
误区二：忽视可访问性导致的可读性和键盘导航问题，在设计时应确保内容对屏幕阅读器仍然可访问。
3. 纯 CSS 实现：基于最大高度的渐变
3.1 思路与实现要点
采用 max-height 来替代 height 的直接变化，通过改变类名来触发过渡，从而实现“看起来像”伸缩的效果。
要点在于：设置一个足够大但不是无限的 max-height，并借助 overflow: hidden 防止内容溢出，同时通过颜色或透明度等属性辅助过渡。
3.2 具体实现步骤
第一步：初始状态为收起，容器高度受限于 max-height 的最小值，隐藏内容。
第二步：展开时增加类名，将 max-height 改为一个足够大的数值，使容器可容纳所有子元素。
/* 纯 CSS 展开/折叠的基础样式（示例） */
.panel {overflow: hidden;max-height: 0;opacity: 0;transition: max-height 0.35s ease, opacity 0.35s ease;
}
.panel.is-open {max-height: 999px; /* 需要一个足够大的值，确保内容不会被裁剪 */opacity: 1;
}
4. JavaScript 助力实现：真实高度的柔性伸缩
4.1 如何获取真实高度与初始化
通过读取元素的 scrollHeight，可以得到内容实际需要的高度，并据此在进入展开状态时把高度设置为这个数值，动画完成后再回到自适应状态。
这种方式避免了最大高度的局限性，能实现更精准的过渡效果及同一套代码在不同内容高度上的复用。
4.2 动画生命周期与结束处理
during transition，可以在 transitionend 事件回调中将高度重设为 auto，确保在后续内容变化时仍然能正确自适应。
此外，为了避免在合拢过程中出现跳动，初始状态应先把高度设为 0，再触发一次强制重绘后再设为 scrollHeight以确保过渡起点一致。
// 展开/折叠的核心逻辑示例
const panel = document.querySelector('.panel');
const trigger = document.querySelector('.trigger');trigger.addEventListener('click', () => {if (panel.style.height && panel.style.height !== '0px') {// 折叠panel.style.height = panel.scrollHeight + 'px'; // 先设为当前实际高度，确保过渡可视化requestAnimationFrame(() => {panel.style.height = '0px';panel.style.overflow = 'hidden';});} else {// 展开panel.style.display = 'block';panel.style.height = '0px';const target = panel.scrollHeight;requestAnimationFrame(() => {panel.style.height = target + 'px';});}
});panel.addEventListener('transitionend', () => {if (panel.style.height === '0px') {panel.style.display = 'none';} else {panel.style.height = 'auto';}
});
5. 代码清单与逐段解释
5.1 CSS 样式片段
通过设置 overflow、高度与过渡属性来实现自适应过渡，同时结合打开状态与关闭状态的类切换。
下面的样式示例展示了基于真实高度的过渡逻辑，兼容大多数浏览器和内容结构。
/* 纯 CSS 的基础结构（尺寸可通过 JS 调整为真实高度） */
.container {border: 1px solid #ddd;
}
.panel {overflow: hidden;height: 0;transition: height 0.35s ease;
}
.panel.open {height: auto; /* 在 JS 逻辑中会被替换为真实高度再回自动状态 */
}
.panel-content {padding: 16px;
}
5.2 JavaScript 交互片段
核心逻辑是：在触发展开时，先让高度变为 0，再把高度设为内容的 scrollHeight，以完成自然过渡，在动画结束后将高度恢复为 auto，确保后续内容变动不再触发跳动。
以下片段给出一个简化的实现思路，帮助理解在真实场景中的整合方式。
// 实现步骤：准备阶段、触发、过渡结束处理
function collapse(el) {el.style.height = el.scrollHeight + 'px';requestAnimationFrame(() => {el.style.height = '0px';});
}
function expand(el) {el.style.display = 'block';el.style.height = '0px';const target = el.scrollHeight;requestAnimationFrame(() => {el.style.height = target + 'px';});
}
const box = document.querySelector('.panel');
document.querySelector('.trigger').addEventListener('click', () => {if (box.style.height && box.style.height !== '0px') {collapse(box);} else {expand(box);}
});
box.addEventListener('transitionend', () => {if (box.style.height === '0px') {box.style.display = 'none';} else {box.style.height = 'auto';}
});
6. 实战要点与调试技巧
6.1 性能优化要点
将高度过渡限定在必要范围内，尽量避免对整页进行重绘，使用 requestAnimationFrame 控制强制重绘时机，减少抖动。
在高频触发的场景中，可以考虑节流（throttle）或防抖（debounce）策略，确保过渡不被多次触发。
6.2 可访问性与回退方案
确保键盘操作与屏幕阅读器依然可用，在展开/收起时提供 ARIA 属性如 aria-expanded、aria-hidden，并在必要时提供非动画的状态指示。
对于不支持 JavaScript 的环境，提供一个静态的展开/收起版本作为回退，避免完全依赖前端动画来传达信息。
7. 性能与兼容性考量
7.1 跨浏览器兼容性
大多数现代浏览器支持 CSS 过渡与 JavaScript 动态操作，但在旧版浏览器中需要进行回退处理，避免直接依赖 transition 的过渡到 auto 高度。
在 CSS 方案中，尽量避免极端的大 max-height，防止渲染成本飙升。
7.2 内容复杂度与动画设计
包含图片、视频或嵌套滚动区域时，可能需要额外的考虑，如为滚动区域添加 separate overflow，确保动画不会因子元素重新布局而产生额外跳动。
对于表格或大段文本的容器，建议在过渡前对内部结构进行简化或分解，以降低重排成本。
