HTML怎么做折叠展开动画_html折叠展开高度过渡动画【参考】-html教程-PHP中文网

max-height 是实现 html 折叠展开高度动画最实用、兼容性最好的 css 方案，但它不能用 auto 做终点值，必须设为具体像素数，否则过渡无效；需搭配 overflow: hidden 和显式 transition 属性，并通过 scrollheight 动态获取高度以确保健壮性。

html怎么做折叠展开动画_html折叠展开高度过渡动画【参考】

max-height 是实现 HTML 折叠展开高度动画最实用、兼容性最好的 CSS 方案，但它不能用 auto 做终点值 —— 必须设为一个具体像素数，否则过渡无效。

为什么不用 `height: 0` → `height: auto`

CSS 的 transition 不支持 height: auto 动画，浏览器无法计算“从 0 到 auto”的中间帧。直接写 height: auto 会导致动画瞬间跳变，失去平滑效果。

常见错误现象：height 动画不触发、内容闪现、收起时残留空白或错位。

必须用 max-height 替代 height，因为 max-height 支持从 0 到具体数值（如 500px）的过渡
max-height 的终点值要大于内容实际高度（可设为 content.scrollHeight + 20），否则动画中途截断
必须搭配 overflow: hidden，否则内容会溢出破坏折叠视觉

`max-height` 动画的关键 CSS 写法

基础样式需同时控制显隐、尺寸和过渡行为：

.foldable {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.foldable.show {
  opacity: 1;
  max-height: 500px; /* 注意：不是 auto */
}

性能提示：transition: all 容易触发重绘甚至重排，显式声明 max-height 和 opacity 更安全可控。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

opacity 配合 max-height 能避免文字在收缩末尾模糊或抖动
若只用 max-height 过渡，建议加 will-change: max-height 提升动画帧率（尤其在低端设备）
不要给 .foldable 设 display: none —— 它会中断过渡，且无法监听 transitionend

JavaScript 中如何动态获取真实高度

硬编码 500px 在内容长度变化时容易失效。更健壮的做法是运行时读取 scrollHeight：

关键点在于「强制重排」：设置 max-height 后立即读取 offsetHeight，让浏览器同步计算布局，再设 opacity: 1。

展开时顺序不能错：max-height = scrollHeight + 'px' → void element.offsetHeight → opacity = '1'
收起时可反向：opacity = '0' → max-height = '0'（利用 transition 顺序自然衔接）
注意：scrollHeight 包含 padding，但不含 margin；若内容有 border 或 margin，需额外加量或用 getBoundingClientRect()