1. 问题根源：CSS 子元素展开时的跳跃现象
1.1 为什么会跳跃
高度从 0 逐渐增至 auto 的过渡在大多数浏览器中不可直接实现，导致展开时出现明显的跃动。核心原因是 CSS 的过渡无法处理不可预知的目标值（如 auto），需要一个可控的定长参考来实现平滑。
为了避免跳跃，常见做法是给容器设置一个明确的上限高度，并通过过渡来改变可视区域的大小。这一步是实现“看起来像展开”的关键，也是后续结合 max-height 的基础。
1.2 设计思路：从 auto 到可控高度的桥接
设计的核心是让容器具备 overflow: hidden 的裁切能力，并利用 max-height 做为过渡属性来模拟展开与收起的过程。通过这个设计，可以避免直接操作 height: auto 的无效过渡。
此外，结合 CSS 变量和简单的 JavaScript，可以实现更灵活的高度控制，让不同内容的折叠行为保持一致性。一致的 UX 将提升页面的可用性和可访问性。
2. 核心技术：max-height 实现平滑过渡
2.1 max-height 的工作原理
max-height 作为可过渡的属性，在 overflow 为 hidden 的情况下，可以让可见区域随高度的变化而平滑调整。通过设定一个足够大的上限，可以覆盖大部分内容的真实高度，达到“无跳跃”的视觉效果。
在实践中，将初始状态设为 max-height: 0，展开时逐步将 max-height 增大到一个大于内容实际高度的值，从而实现动画效果。收起时再回到 0，也能产生顺滑的收缩。
2.2 与 height/auto 的权衡
真正的难点在于内容高度是动态的，scrollHeight 可以用来获取内容的实际高度，并在展开时动态赋值给 max-height。使用 JavaScript 动态更新，可以应对不同内容高度的场景。
为了避免内容被截断，建议在实现中设置一个合理的上限值，例如 max-height: 1000px，并在实际展开时调整到更贴近内容的高度，确保视觉效果自然。
3. 进一步优化：引入 animation-height
3.1 animation-height 的概念与实现
“animation-height”不是一个标准属性，但通过组合 CSS 自定义属性 与 @property 声明，可以让高度像属性一样参与动画。这使得高度的平滑过渡更加自然，尤其在需要渐变时更为直观。
实现中，通过定义一个可动画的自定义属性，如 --anim-height，结合 height: var(--anim-height)，即可实现从 0 逐步过渡到目标高度的效果。
3.2 与 @property 搭配实现可动画高度
使用 @property 声明自定义属性的语法和类型，使其能够参与 CSS 动画。这一步是让“动画高度”真正可控的关键，也为跨浏览器兼容带来挑战。
@property --anim-height {syntax: '';inherits: false;initial-value: 0px;
}
接着在 CSS 中使用该变量并进行过渡：height 使用自定义属性，并对其进行平滑过渡。
.panel {height: var(--anim-height);overflow: hidden;transition: height 0.4s ease;
}
.panel.open {--anim-height: 240px; /* 也可以设为 panel.scrollHeight 等动态值 */
}
通过这种方式，动画高度变量会在过渡中逐步变化，呈现更连贯的展开效果。
4. 代码实例：一个可复用的折叠面板
4.1 HTML 结构
一个简单的折叠组件通常包含一个控制按钮和一个内容区域。语义清晰、可访问性友好的结构有助于 SEO 和用户体验。
按钮的 aria-expanded 状态可以反映面板的当前状态，便于辅助技术读取。
<button class="toggle" aria-expanded="false" aria-controls="panel1">展开</button>
<div id="panel1" class="panel" hidden><p>这里是可折叠的内容，可能包含文本、图片等元素。</p>
</div>
4.2 CSS 关键样式
核心在于通过 max-height 或 动画高度实现过渡，配合 overflow: hidden 和必要的边距保留，确保可视区域平滑变化。
:root {--content-max: 0px;
}
.toggle {cursor: pointer;
}
.panel {overflow: hidden;max-height: 0;transition: max-height 0.4s ease;
}
.panel.open {max-height: 1000px; /* 足够覆盖大多数真实高度 */
}
在这种实现中，打开时通过 class 切换，并通过最大高度实现平滑过渡；也可结合 JavaScript 计算真实高度进行更精准控制。
4.3 JavaScript 触发逻辑
为实现交互，需要在点击按钮时切换状态并调整高度。动态计算真实高度可以减少顶边和底部留白，提升视觉效果。
const toggleBtn = document.querySelector('.toggle');
const panel = document.getElementById('panel1');toggleBtn.addEventListener('click', () => {const isOpen = panel.classList.contains('open');if (isOpen) {// 收起panel.style.maxHeight = '0px';panel.classList.remove('open');toggleBtn.setAttribute('aria-expanded', 'false');} else {// 展开：先确保可渲染高度再进入过渡panel.style.maxHeight = panel.scrollHeight + 'px';panel.classList.add('open');toggleBtn.setAttribute('aria-expanded', 'true');}
});
5. 备选方案与兼容性注意事项
5.1 使用 max-height 的通用性
max-height 的兼容性较好，在多数现代浏览器都能稳定工作，特别是对简单列表、描述文本等内容的折叠效果最为可靠。注意记得设置合适的上限值，避免给出过大的值导致页面重排成本增高。
对于复杂的内容结构，若需要高精度的高度自适应，结合 JS 动态计算与 max-height 过渡，是一种兼容性与体验的折中方案。确保在不同屏幕下都能保持一致的行为。
5.2 使用 animation-height 的前提与限制
animation-height 的方案更现代，能够产生更顺滑的视觉效果，但需要浏览器对 @property 的支持。在旧版本浏览器中可能不生效，需要回退到 max-height 方案或使用其他渐变方法。
在实际项目中，可以提供两种模式的切换：首选 animation-height，若不可用则回退到 max-height，以提升兼容性和用户体验。
关键词回顾：CSS 子元素、展开折叠、动画跳跃、max-height、overflow、transition、animation-height、@property、scrollHeight、JavaScript 动态高度。
