max-height 从 0 到 none 无法过渡，因 none 非可动画数值，导致跳变；应改用足够大的具体像素值或 js 动态测量真实高度并设置，收起后再置为 none，配合强制重排和 will-change 提升性能。
为什么直接 transition max-height 不生效
因为 max-height 从 0 到 none 无法过渡——浏览器不识别 none 为可动画的长度值，会跳变。常见表现是：点击后内容瞬间弹出/消失，没有平滑效果。
- 别写
max-height: none做终点，它不是数值，transition 失效 - 用具体像素值（如
max-height: 500px）代替none，但得预估足够高的上限 - 如果内容高度变化大（比如含图片或动态文本），500px 可能不够，导致裁剪；太大会让动画变慢（即使内容短，也要拉满到那个值）
如何用 JS 配合 CSS 实现真正自适应的展开动画
核心思路：先关闭 transition，用 JS 测出真实高度，再打开 transition 并设为该高度，动画结束后再设回 max-height: none（仅用于后续无高度限制的布局）。
- 展开前：
element.style.maxHeight = '0'+element.style.overflow = 'hidden' - 强制重排（触发 layout）：
element.offsetHeight（空读取即可） - 设目标高度：
element.style.maxHeight = element.scrollHeight + 'px' - 收起时反向操作，最后动画结束再设
maxHeight = '0'和overflow = 'visible' - 注意：不要监听
transitionend后立刻清除max-height，否则下一次展开又得重新测高，影响性能
纯 CSS 方案的取舍：用 padding + opacity 模拟手风琴
当内容结构固定、高度差异不大时，可绕开 max-height 动画，改用更稳定的组合：
-
height: 0→height: auto不行（auto不可过渡），但padding和opacity可以 - 展开时：同时过渡
padding-top/padding-bottom和opacity，视觉上接近“撑开” - 适合标题+单段简介类内容，不适用于多行文本或浮动元素，因为
height: 0会压垮内部流式布局 - 优点：零 JS、兼容性好（IE10+）；缺点：无法精确控制展开节奏，且 padding 值需手动调，响应式时易错位
transition-timing-function 对体验的影响被严重低估
用默认 ease 或线性 linear 做手风琴，容易显得生硬或拖沓。实际中，cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 ease-in-out 但更轻快）更贴合“拉开-停稳”的物理感。
- 避免用
ease-in：开头太慢，用户会误以为没点上 - 慎用
steps(4, end)：虽然能做分段展开，但和手风琴的连续伸缩预期冲突 - 动画时长建议 250–350ms：短于 200ms 显得急促，长于 400ms 让人等待感明显
- 记得加
will-change: max-height（仅在动画触发前设置），对滚动区域内的手风琴可减少重绘卡顿
max-height: none 当成万能终点，或者忘了强制重排那行 offsetHeight。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
