使用 max-height 和 overflow: hidden 实现元素折叠展开动画，通过设置足够大的 max-height 并配合 transition 过渡效果，解决 height: auto 无法参与动画的问题，结合 JS 控制类切换触发平滑展开收起，适用于内容高度不确定的场景。

使用 CSS transition 实现元素的折叠展开效果时，如果直接对 height 使用过渡动画，会发现无法平滑播放，因为 height: auto 无法参与过渡。一个常见的解决方案是利用 max-height 配合 overflow: hidden 来实现视觉上的“展开/收起”动画效果。

原理说明

当元素的高度不确定（比如内容动态变化）时，不能直接设置 height 的过渡。但可以设置一个足够大的 max-height，让内容在展开时有足够的空间显示，再通过改变 max-height 的值来触发 transition 动画。

关键点：

• 初始状态：设置 max-height: 0，overflow: hidden 实现隐藏
• 展开状态：设置较大的 max-height（如 500px 或更大），确保能容纳所有内容
• 配合 transition 实现高度变化的过渡动画

CSS 示例代码

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
<p>.collapsible.expanded {
max-height: 500px; /<em> 足够大以容纳内容 </em>/
transition: max-height 0.3s ease-in;
}</p>

HTML 结构示例：

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

<div class="collapsible" id="content">
  <p>这里是可折叠的内容，可以有多行文本或其他元素。</p>
</div>
<button onclick="toggle()">切换</button>

J*aScript 控制展开/收起

function toggle() {
  const el = document.getElementById('content');
  el.classList.toggle('expanded');
}

点击按钮后，元素会在 max-height: 0 和 max-height: 500px 之间切换，产生折叠动画效果。

注意事项与优化建议

• max-height 值要合理：设得太小可能裁剪内容，太大可能导致动画时间过长或不自然
• 避免使用 height: auto + transition：浏览器无法计算从 0 到 auto 的中间值
• 可结合 JS 获取实际高度：如果追求更精确的动画，可以在 JS 中动态获取内容高度并设置为 height 过渡目标
• 注意性能：频繁重排可能影响性能，尽量避免在复杂布局中滥用

基本上就这些。用 max-height 模拟高度过渡是一种简单有效的方法，适合大多数折叠面板、下拉菜单等场景。虽然不是完美的“真实高度”动画，但在用户体验上已经足够流畅自然。

以上就是css transition与max-height折叠效果的详细内容，更多请关注其它相关文章！

# css  # javascript  # java  # html  # js  # 浏览器  # ssl  # overflow  # 不确定  # 中不  # 两种类型  # 是一种  # 选择器  # 更大  # 但在  # 适用于  # 会在  # 相关文章  # 杭州seo排名首页收录  # 外链对网站优化好处  # 长沙网站优化靠谱公司  # 免费网站优化师  # 有无广告的网站推广平台  # 滨州网站建设工作内容  # 短视频seo公司费用  # 石家庄网站建设首选  # 鄂州网站推广排名服务  # 电商推广内容营销