height: auto 无法用于 CSS 过渡，因浏览器无法对 auto 插值；应改用 max-height 配合 overflow: hidden，并显式设置起止值，动态内容需用 JS 读取 scrollHeight 精准赋值。
为什么直接用 height: auto 做过渡会失效
因为 CSS 的 transition 无法在 height: auto 和具体像素值之间插值计算——浏览器不知道 auto 对应多少像素，动画就直接跳变。这不是 bug，是规范限制。
常见错误现象：点击后内容瞬间出现/消失，没有滑动过程；或只看到 opacity 变化但高度不动。
- 不要写
height: 0 → height: auto - 不要依赖
all 0.3s ease—— 它会让所有可动画属性一起动，可能触发重排、卡顿，甚至意外动画（比如color或margin） - 必须显式声明
max-height的起止值，并确保目标值 ≥ 内容真实高度
max-height 设多少才够用
设太小：内容被截断，底部看不见；设太大：动画时间拉长，收起时有明显“悬停感”。关键不是猜，而是按需设定。
推荐做法分两类：
立即学习“前端免费学习笔记（深入）”；
- 静态内容（如固定菜单项、已知文案）：直接设一个安全上限，比如
max-height: 400px，只要比最大可能高度多 20–50px 即可 - 动态内容（如 API 渲染的列表、用户输入的富文本）：用 JS 读取
element.scrollHeight后赋给style.maxHeight，再加类触发动画 - 避免用
9999px这类魔数——它会让收起动画慢半拍，尤其在低端设备上更明显
必须加 overflow: hidden 吗
必须。这是 max-height 动画生效的前提条件，不是可选项。
不加的话，即使 max-height: 0，内容仍会完整显示，动画完全不可见。而且一旦内容撑开容器，max-height 就失去控制力。
-
overflow: hidden要写在初始状态（未展开）和展开状态都生效的类里，不能只写在 .show 中 - 不要用
visibility: hidden替代——它不占布局空间但不阻止内容溢出，且无法配合max-height实现滑动效果 - 如果内容含绝对定位子元素，注意它们可能逃逸出
overflow: hidden区域，需额外约束
JS 切换类时容易漏掉的关键点
动画是否流畅，80% 取决于 JS 是否在正确时机读取和设置样式。常见疏漏不是逻辑错，而是 DOM 状态没“稳住”就操作。
- 判断当前状态别用
style.opacity === '1'或getComputedStyle(el).maxHeight === '0px'——这些值受缓存或中间态影响，不可靠；改用 classList.contains('show') - 需要动态设高度时，先加
show类，再强制重排（如读一次offsetHeight），最后设maxHeight，否则浏览器可能跳过动画帧 - 收起前如果内容区域正在滚动或聚焦，记得先
el.blur()和el.scrollTo(0, 0)，防止动画过程中焦点/滚动干扰渲染
最常被忽略的是：max-height 的过渡起点必须是 0（不能是 0px 以外的任何值），终点必须是带单位的数值（不能是 none 或空字符串）。这两个边界值一旦出偏差，整个动画就退化成硬切。
