height: 50%加transition无效是因为父容器高度为auto导致计算结果为0px，过渡在0→0间发生；max-height: auto也无法插值，须改用具体数值如400px或100vh，并用scrollHeight动态获取高度，transition需始终声明在基础类中。
为什么height: 50%加了transition还是不动
因为浏览器根本没算出起始高度——height: 50%依赖父级像素高度，若html、body或任意上层父容器是height: auto（默认值），整条计算链就断了，结果就是50% × 0px = 0px。过渡在0px → 0px之间发生，自然看不见。
max-height: 0 → max-height: auto 为什么也不动
max-height: auto无法参与插值，和height: auto一样，浏览器不知道“auto”对应多少像素，直接跳过动画。常见错误写法：max-height: 0; transition: max-height 0.3s; → max-height: auto;。
- ✅ 正确做法：用具体数值替代
auto，比如max-height: 400px（确保大于内容实际高度） - ⚠️ 峰值设太小会“刹不住”：动画跑到一半发现内容撑出了边界，视觉上像突然弹出
- ? 更稳妥的峰值写法：
max-height: 100vh或max-height: 1000px，兼顾响应式与安全余量
如何用JS动态设置max-height峰值
当内容高度不确定（如异步加载、Vue/React 渲染后），硬写固定值不现实，得靠scrollHeight实时读取：
el.style.maxHeight = el.scrollHeight + 'px';
- ⚠️ 注意：如果元素有
padding，scrollHeight不含它，需手动补全：el.scrollHeight + parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom) - ⚠️ 动态内容场景下，
scrollHeight容易读早——DOM还没更新完就执行了。解决方法：用requestAnimationFrame延迟一帧再读 - ❌ 不要用
offsetHeight替代scrollHeight：它只返回当前渲染可见高度，对隐藏内容无效
transition写在哪才真正生效
过渡声明必须持续存在，不能只挂在某个切换类里。例如下面这种写法会失效：
立即学习“前端免费学习笔记（深入）”；
.closed { max-height: 0; transition: max-height 0.3s; }
.opened { max-height: 300px; }
因为移除.closed的同时也移除了transition声明，浏览器失去插值上下文。
- ✅ 正确结构：把
transition写在基础类或元素本身上，比如el.style.transition = 'max-height 0.3s ease';，或CSS中用.collapsible { transition: max-height 0.3s; } - ⚠️ 切记：从
display: none切到block不会触发动画，因为display变化不触发重排动画；先设display: block再改max-height
transition，而取决于浏览器能否在两个时间点都拿到确定的像素值。百分比、auto、display切换，都是在悄悄切断这个前提。 
