不能直接用 height: 0 + transition 做折叠动画，因为 height: auto 不是可计算数值，导致过渡失效；应改用 max-height 配合 overflow: hidden 和 opacity 实现可靠动画。
为什么不能直接用 height: 0 + transition 做折叠动画
因为 height 设为 auto 时无法触发 CSS 过渡——浏览器不知道目标高度是多少，transition 就会直接跳变。常见现象是：点开时立刻显示，收起时有动画但点开没动画，或者完全无动画。
根本原因是：CSS 过渡只对可计算的数值型属性生效，而 auto 不是数值。
- 别写
height: auto配transition: height 0.3s—— 它不工作 - 别依赖 JS 动态读取
scrollHeight后再设height再过渡 —— 容易闪屏、时序难控 - 真正轻量且可靠的做法是：用
max-height替代height，并给一个「足够大但不过分夸张」的上限值
max-height 动画的关键取值和陷阱
设 max-height: 0 → max-height: 500px 看似可行，但 500px 是硬编码，内容一超就裁剪；设成 9999px 又会导致动画变慢（浏览器要匀速走完全部距离）。
- 安全值推荐：
max-height: 20rem或max-height: 320px—— 覆盖多数文本段落、表单组、小卡片，又不会让动画拖沓 - 避免用
vh单位（如max-height: 100vh），滚动容器内会失效，且响应式下不可靠 - 必须同时设置
overflow: hidden，否则内容会溢出、遮挡其他元素 - 收起时记得加
opacity: 0配合transition，否则文字在高度缩小时仍可能短暂可见
如何用纯 CSS 实现“点击切换”且不依赖 JS 监听
不需要监听 max-height 变化，也不用 MutationObserver。CSS 本身就能驱动状态切换，关键在于利用 :checked + hidden 属性或兄弟选择器。
立即学习“前端免费学习笔记（深入）”；
最简结构示例：
<input type="checkbox" id="panel-toggle" hidden>
<label for="panel-toggle">点击展开</label>
<div class="panel">
<p>这里是折叠内容...</p>
</div>
<style>
.panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
#panel-toggle:checked ~ .panel {
max-height: 320px;
opacity: 1;
}
</style>
-
hidden属性不能替代display: none，它不参与布局，但会禁用所有交互，慎用于需要键盘焦点的面板 - 如果必须用按钮（
<button></button>），就得靠 JS 切换类名，此时建议用classList.toggle('is-open')，然后 CSS 写.panel.is-open规则 - 别给
max-height加!important—— 容易和媒体查询冲突，优先级问题比动画更难调试
移动端点击区域小、动画卡顿的应对方式
在 iOS Safari 或低端安卓机上，max-height 动画可能掉帧，尤其内容多或字体渲染复杂时。这不是代码错，是浏览器合成层未启用。
- 强制开启硬件加速：给面板加
transform: translateZ(0)或will-change: max-height（后者慎用，可能引发内存泄漏） - 点击区域至少保证
44px × 44px，用padding扩展 label 区域，别只靠文字触发 - 避免在动画过程中修改 DOM（比如边展开边往里面
appendChild）—— 会中断过渡、重排布局 - 如果内容含图片或 iframe，考虑先占位（
aspect-ratio或padding-top百分比），再懒加载，防止展开后突然撑高导致动画中断
真正难调的是内容高度波动大的场景，比如展开后内部有动态行数的文本、可折叠子项、或响应式表格。这时候 max-height 的预估值就容易失准，要么裁剪，要么动画虚长——没有银弹，得结合 JS 测高兜底，但那是另一层复杂度了。
