transition无法直接作用于height: auto，需用max-height、js动态设置高度或transform: scaley()替代；推荐cubic-bezier曲线优化动画节奏，并注意移动端touch事件下的重排问题。
transition 不能直接作用于 height: auto
这是手风琴动画最常卡住的地方。很多人写 height: auto + transition: height 0.3s，结果动画不生效——因为浏览器无法计算 auto 的起始/结束数值，transition 就只能跳变。
解决思路是避开 auto，改用可测量的值：
- 用
max-height代替height，设一个足够大的安全上限（比如max-height: 500px），再配transition: max-height 0.3s ease - 或者用 JS 先读取元素真实高度（
offsetHeight），再动态设置height并触发重排，最后移除内联 height 让其回退到auto - 更稳妥的做法：用
transform: scaleY()+overflow: hidden，避免高度计算，但会丢失内部滚动和垂直对齐特性
用 getComputedStyle 读取初始 height 再过渡更可靠
当内容高度差异大、且需要精确控制动画节奏时，硬编码 max-height 容易出现“拉伸过长”或“提前截断”。这时应让 JS 参与过渡起点判断。
典型流程：
- 点击展开前，先获取目标内容区的
offsetHeight - 给元素设
style.height = "0"，强制触发重排 - 再设
style.height = offsetHeight + "px"，浏览器会从 0 过渡到真实高度 - 动画结束后，移除
height内联样式，恢复为height: auto
注意：必须在设 height: 0 后加一次 getComputedStyle(el).height 强制重排，否则后续 height 设置不会触发动画。
transition-timing-function 影响体验感的关键细节
手风琴不是匀速开关门，用户感知上需要“启动快、收尾缓”，否则会有生硬感。默认 ease 基本够用，但更推荐：
- 展开时用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准展开曲线） - 收起时用
cubic-bezier(0.4, 0.0, 0.2, 1)，避免结尾拖沓 - 不要对
max-height使用ease-in-out—— 因为中间段变化不明显，实际效果反而像两段跳变
如果同时过渡多个属性（如 max-height 和 opacity），务必分开声明，避免互相干扰：transition: max-height 0.3s cubic-bezier(...), opacity 0.2s linear
移动端 touch 事件下 transition 容易失效
在 iOS Safari 或部分安卓 WebView 中，快速连续点击手风琴项，常出现动画卡住、高度残留、甚至完全跳过 transition。根本原因是浏览器在 touch 事件密集时合并重排，或对内联 style 更新延迟。
缓解方式：
- 给容器加
will-change: height（仅在动画触发前临时添加，结束后移除） - 避免在
touchstart立即操作 DOM，改用touchend或加setTimeout(fn, 0)延迟一帧 - 禁用双击缩放：
meta name="viewport" content="user-scalable=no"能减少部分 iOS 下的渲染异常
真正复杂的交互（比如嵌套手风琴、配合滚动定位）建议直接用 requestAnimationFrame 控制 height 变化，而不是依赖 CSS transition。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
