不能直接用 height + transition 是因为 height: auto 无法参与动画计算，导致过渡失效。解决方案是使用 max-height 配合 overflow: hidden 实现展开收起效果：初始状态设 max-height: 0，展开时设为足够大的值（如 500px），并通过 transition 控制动画过程，结合 JavaScript 切换类名触发动画；同时建议合理设置 max-height 值、避免固定高度布局、搭配 opacity 或 transform 提升视觉效果，并注意重排性能影响。该方法兼容性好，无需 JS 计算具体高度，适用于大多数动态内容场景。
在CSS中实现卡片展开过渡效果时，直接对 height 使用 transition 看似简单，但当内容高度不固定时会遇到问题——无法提前知道目标高度，导致 transition 失效或生硬。一个实用的解决方案是结合 max-height 与 transition，通过控制最大高度来模拟展开/收起动画。
为什么不能直接用 height + transition？
当设置 height: auto 到具体数值（如 0）之间的过渡时，浏览器无法计算中间状态，因为 auto 不是一个可动画的值。因此，transition 会直接跳变，失去动画效果。
使用 max-height 模拟动态高度过渡
核心思路是：利用 max-height 设置一个足够大的值，覆盖内容可能出现的最大高度，再通过改变 max-height 或配合 overflow 隐藏溢出内容，实现视觉上的展开和收起。
常用实现方式如下：
立即学习“前端免费学习笔记（深入）”；
- 初始状态：max-height 设为 0 或较小值，overflow: hidden 隐藏内容
- 展开状态：max-height 设为较大值（如 500px、1000px），确保能容纳所有内容
- 配合 transition 对 max-height 进行动画
CSS 示例：
.card {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
}
<p>.card.expanded {
max-height: 500px; /<em> 足够容纳内容 </em>/
}</p>HTML 结构：
<div class="card" id="myCard"> <p>这里是卡片展开后的内容...</p> </div>
通过 JavaScript 控制类名切换即可触发动画：
document.getElementById('myCard').classList.toggle('expanded');
优化建议与注意事项
虽然 max-height 方案简单有效，但也有一些细节需要注意，以提升用户体验：
- 合理设置 max-height 值：太大可能导致动画时间过长；太小则内容被截断。可根据实际内容预估，如常见文本块一般不超过 400px
- 避免 fixed 高度限制布局：保持使用 max-height 而非 height，以适应不同屏幕或内容变化
- 搭配 opacity 或 transform 提升视觉效果：例如同时淡入文字，让动画更自然
- 注意性能：max-height 动画仍会触发重排（reflow），但现代浏览器对此优化较好，一般无需担心
基本上就这些。这个方案虽不是完美精确高度动画，但在大多数场景下足够实用，兼容性好，无需 JS 计算高度，适合快速实现卡片展开收起动效。
