height: auto 无法过渡因非数值，max-height 可过渡需设足够大值且配 overflow: hidden；常见错误包括误用 auto/none、漏 overflow、max-height 设值不当；须按内容预估或 js 动态获取 scrollheight。
不能直接用 height: auto 做过渡动画，必须用 max-height 配合 overflow: hidden —— 这是唯一能兼顾平滑、兼容、无需 JS 的方案。
为什么 height 不能过渡，而 max-height 可以
height: 0 → height: auto 不会触发动画，因为 auto 不是可计算的数值，浏览器无法插值；max-height 是数值属性，支持 CSS transition，只要设得比内容实际高度大，就能“撑开”容器。但注意：max-height: 0 → max-height: none 同样无效，none 不参与过渡。
常见错误包括：
- 写
height: 0 → height: auto，结果内容瞬间闪现，无动画 - 写
max-height: 0 → max-height: none，动画直接中断 - 只加
transition却漏掉overflow: hidden，展开时内容溢出、遮挡其他元素
max-height 该设多大才不卡、不截、不拖沓
硬写 max-height: 500px 或 100vh 是最常踩的坑：内容超长会被截断，内容很短时动画要跑满全程，视觉上明显拖沓。响应式页面尤其危险——小屏文字换行增多，原设的 400px 在 iPhone 上可能不够。
稳妥做法是按当前内容最大可能高度预估，而不是拍脑袋填值：
- 若内容高度较统一（如 FAQ 每条 3–6 行），可分组设不同值：
.short-item { max-height: 120px; }、.long-item { max-height: 300px; } - 若高度差异极大，或需完全自适应，必须用 JS 动态读取
scrollHeight并赋值，收起时再设回0 - 避免
max-height: 100vh：滚动时收起延迟明显，像“粘住”，尤其在 iOS Safari 中
overflow: hidden 必须加在谁身上、怎么验证它真生效
必须加在被展开的容器（如 .accordion-content）上，且不能被父级的 overflow: visible、clip-path 或其他裁剪规则覆盖。漏掉这句，动画过程中内容会溢出、错位，甚至触发意外重排。
检查是否生效的实操方法：
- 临时加
border: 1px solid red到该容器，看动画过程是否始终被框住 - 在 DevTools 中检查 computed 样式，确认
overflow确实是hidden，且未被层叠覆盖 - 旧版 Android WebView 可能忽略嵌套中的
overflow: hidden，可加will-change: max-height强制创建合成层
兄弟选择器用 + 还是 ~？结构决定成败
真实 DOM 很少是 input → .panel 的紧邻关系；更多是 input → label → .panel，此时 input:checked + .panel 完全失效。必须用 input:checked ~ .panel 才能匹配到后续所有同级 .panel 元素。
但要注意副作用：
-
~匹配的是「同一父容器内、该元素之后的所有目标元素」，别让页面其他位置的同名 class 被误中 - 如果结构允许且严格可控（比如手风琴项用
fieldset包裹，每个input后紧跟.panel），+更精准、性能略优 - 用
details/summary标签可绕过选择器问题，语义清晰、原生支持、无需 hack，但动画控制弱于 CSS 方案
真正难的不是写出第一版动画，而是让 max-height 值随内容变化、让 overflow: hidden 在各种嵌套和旧环境中稳定生效——这两点一旦松动，动画就跳、卡、截断，用户一眼就能感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
