max-height动画失效或跳变的根本原因是写死值不匹配实际高度：设小会截断内容，设大会拖慢动画；必须配合overflow:hidden、显式transition声明及js动态测量scrollheight确保精准适配。
直接用 max-height 切换动画，90% 的卡顿、截断、突变问题都出在值设错了或漏了关键约束。
为什么 max-height: 0 → max-height: 500px 会失效或跳变
浏览器无法对 height: auto 做插值，所以必须用 max-height；但写死 500px 是最常见翻车点——内容实际高 520px，就会被裁掉最后一行；写成 9999px 又会让动画末尾拖沓，尤其在低端 Android 或旧 Safari 上明显卡顿。
- 安全上限推荐：
max-h-[320px]（Tailwind）或max-height: 20rem（原生 CSS），覆盖多数段落、列表、小表单，又不拖性能 - 绝对别用
vh单位（如max-height: 80vh），滚动中视口变化会导致突然截断 - 子元素若有
padding、border或margin，max-height: 0时仍可能露头——必须配overflow-hidden且始终存在，不能只在折叠态加
:checked + ~ 选择器不生效的典型原因
纯 CSS 折叠依赖 input[type="checkbox"] 状态驱动样式，但 DOM 结构稍有偏差就中断触发链。
-
input必须和目标div在同一父容器内，且input必须在div之前（否则~选不到） - 中间不能插入真实节点：注释、空格文本、
<span></span>都会阻断~的匹配（+更脆弱，只认紧邻） - Vue/React 中若用
v-model或useState控制显隐，却保留原生input，会造成状态错乱——要么全删原生逻辑，要么彻底交由 JS 控制内联style.maxHeight - 调试方法：DevTools 里手动勾选
input，看对应div是否应用了目标max-h-[320px]类；没生效就是选择器断了
动画过程中文字被压扁、半截悬空怎么办
这不是 bug，是 max-height 缩放与字体渲染、overflow: hidden 截断不同步导致的视觉撕裂。
- 加
opacity: 0初始态 +opacity: 1展开态，并和max-height同步过渡，能有效掩盖撕裂 - 别写
transition-all，显式声明：transition: max-height 0.3s ease, opacity 0.3s ease，避免其他属性干扰节奏 - 内容含图片或异步加载时，初始高度测量不准——此时纯 CSS 不够用，得靠 JS 读
el.scrollHeight后设内联style.maxHeight，再触发动画（注意：先设0→ 强制 reflow（如读offsetHeight）→ 再设目标值）
真正难的不是让一段静态文本动起来，而是当面板里塞进图片、iframe、嵌套 flex 容器，或响应式文本换行后高度突变时，scrollHeight 计算失准、overflow: hidden 因父级 transform 失效、甚至字体加载延迟引发重排——这些没法靠一个通用值兜底，得逐 case 测量和隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
