一、原理与关键点
在卡片折叠展开的交互设计中，平滑动画是提升用户体验的关键。选择实现方式时，max-height成为一个常用的解决方案，因为它具备简单性和广泛的兼容性。通过将容器的最大高度设定为一个足够大的值，并结合overflow: hidden与transition，可以实现流畅的展开与收起效果。
需要注意的是，直接将高度从 0 动画到 auto 会遇到难题，因此通常采用固定的 最大高度作为可动画的目标，再通过脚本在展开时将其动态调整到真实高度，最后恢复为自适应高度以维持布局的稳定性。
最大高度的优点与限制
使用 max-height 的主要优势是实现简单、CSS 优先的动画，并且对主流浏览器友好。它能快速落地原型与产品迭代。
但它也有局限性：高度上界必须设置成一个大于实际展开高度的固定值，否则会截断内容，影响可见性。内容若经常变动，需重新计算高度值以避免跳动。
二、HTML结构与可访问性
良好的结构是实现可维护折叠卡片的前提。将按钮作为交互入口，配套的内容区域作为可展开区域，可以让屏幕阅读器更好地理解页面层次。
在设计时，务必为交互元素添加aria-expanded与aria-controls等无障碍属性，并确保内容区域有清晰的标识符与命名，帮助辅助技术正确地描述当前状态。
可访问的标记结构示例
<div class="card"><button id="card1" class="card__trigger" aria-expanded="false" aria-controls="card1-content">卡片标题</button><div id="card1-content" class="card__content" role="region" aria-labelledby="card1" style="max-height:0; overflow:hidden;"><p>折叠区域的文本内容...</p><p>更多细节信息...</p></div>
</div>通过上述结构，除了实现动画外，还能确保辅助技术正确解读当前状态与区域关系。aria-expanded 的切换直接反映按钮的当前状态，aria-controls 指向要展开的区域。
三、样式设计与动画实现
CSS 为折叠动作提供了过渡效果的视觉基础。通过为内容区域设置 max-height、overflow: hidden 与 transition，可以实现从隐藏到显示的平滑变化。
结合一个简单的命名约定，可以在后续扩展中更容易维护。然后再通过 JavaScript 控制 max-height 的实际数值，以适应不同内容高度的变化。
CSS 实现要点
/* 样式示例：卡片折叠面板 */
.card__content {max-height: 0;overflow: hidden;transition: max-height 0.5s ease;
}
.card.is-open .card__content {max-height: 1000px; /* 需确保大于实际最大高度 */
}这段 CSS 让内容区域在隐藏时高度为 0，在展开时通过一个相对较大的值实现平滑过渡。你可以在后续动态更新这个最大高度，以匹配实际内容。transition 的存在是实现平滑动画的关键。
基于脚本的动态控制
为达到精确的动画效果，JavaScript 逻辑通过读取触发按钮目标区域的 scrollHeight，将 max-height 设置为真实高度以实现平滑展开。
const triggers = document.querySelectorAll('.card__trigger');
triggers.forEach(btn => {btn.addEventListener('click', () => {const content = document.getElementById(btn.getAttribute('aria-controls'));const isOpen = btn.getAttribute('aria-expanded') === 'true';if (isOpen) {// 关闭content.style.maxHeight = content.scrollHeight + 'px';requestAnimationFrame(() => {content.style.maxHeight = '0px';});btn.setAttribute('aria-expanded','false');content.setAttribute('aria-hidden','true');} else {// 打开content.style.maxHeight = content.scrollHeight + 'px';btn.setAttribute('aria-expanded','true');content.setAttribute('aria-hidden','false');content.addEventListener('transitionend', function te() {content.style.maxHeight = 'none';content.removeEventListener('transitionend', te);});}});
});通过该脚本实现，打开时会将 content 的高度精确设置为 scrollHeight，并在展开结束后重置为 none，以允许内容自适应变动。此逻辑也确保了aria-expanded与可读性的一致性。
四、兼容性与性能优化
使用 max-height 作为动画目标在多数现代浏览器中表现稳定，但在极端高度变化或低端设备上应考虑降级策略以及可访问性影响。
此外，结合系统偏好设置的 prefers-reduced-motion，可以在用户请求减少动画时自动停用过渡效果，提升无障碍体验。
浏览器兼容性与无障碍性
@media (prefers-reduced-motion: reduce) {.card__content {transition: none;}
}该策略可以确保当用户明确偏好减少动画时，界面不会强制执行复杂的过渡，从而提升可访问性。prefers-reduced-motion 的应用也是遵循无障碍设计的一个常见做法。
性能与维护要点
为了保持渲染性能，在高度变化时应避免触发大量的重排（reflow）。通过仅更改 max-height，并确保内容区域使用 overflow: hidden，可以获得较佳的性能。
在多卡片场景下，尽量对同级元素使用最小化的动画属性，并在必要时将不活跃的面板从视觉流中处理，以减小绘制工作量。
