直接用max-height做展开动画会卡顿或不精准，因为max-height从0到none无法触发CSS过渡，浏览器只能估算高度导致忽快忽慢、收不严或跳变；真正可控的方式是先用JS获取scrollHeight再设为具体px值过渡，并配合overflow:hidden和状态同步。
为什么直接用 max-height 做展开动画会卡顿或不精准
因为 max-height 从 0 到 none 无法触发 CSS 过渡——浏览器不知道 none 对应多少像素，只能硬凑一个估算值，导致动画忽快忽慢、收不严、或高度跳变。
真正可控的方式是基于实际内容高度做过渡。常见做法是：先用 JS 获取元素真实 scrollHeight，再设为 height 并过渡；收起时再回到 0。
- 必须配合
overflow: hidden，否则内容会溢出 -
height不能用auto过渡，只能用具体数值（px） - 收起后建议加
pointer-events: none防止误触，展开后再恢复
transition 该写在哪？哪些属性能真正过渡
只对 height 做 transition 是不够的——如果子元素有 padding/margin/border，它们不会随 height 动画隐去，视觉上会“挤”出来。所以推荐组合过渡：
transition: height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
但更稳妥的做法是把所有可变尺寸收进一个容器内，让 height 控制整个区块，其余样式保持静态。例如：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 面板内容区用
padding，但父容器不设 padding，避免过渡冲突 - 避免在动画元素上同时设置
border和box-sizing: content-box，否则 border 会参与高度计算并抖动 - 开启硬件加速（
transform: translateZ(0)）对长列表有轻微提升，但非必需
如何用 JS 精确控制展开/收起状态与动画同步
关键不是“点击就 toggle”，而是确保：1）JS 设置 height 后，浏览器完成重排（reflow），再触发 transition；2）动画结束时准确更新 ARIA 属性和状态类名。
典型错误是直接写 el.style.height = el.scrollHeight + 'px'，然后立刻加 class——此时 height 还没生效，transition 不会启动。
- 正确做法：先设
el.style.height = '0'，offsetHeight强制重排，再设目标高度 - 监听
transitionend事件时，需过滤掉height以外的属性（如 padding），避免重复触发 - 收起完成后，应将
height设回''（空字符串），释放内联样式，便于后续复用
移动端点击区域小、响应延迟怎么解决
Accordion 标题常只是文字，但用户习惯点整行。若只给 <button> 或 <h3> 加点击事件，边缘区域响应差，且 iOS Safari 有 300ms 延迟。
- 标题容器用
display: block+padding扩展可点区域，别依赖默认 inline 行为 - 加
touch-action: manipulation消除 iOS 300ms 延迟 - 避免在
click里做复杂计算（如反复查scrollHeight），可提前缓存或用getBoundingClientRect()替代 - 如果面板内容含 iframe 或视频，展开前建议暂停，防止动画卡顿
丝滑不是靠过渡时间拉长，而是每一步都避开浏览器重排陷阱、状态同步错位、以及移动端交互盲区——这些地方一漏，0.3s 的动画也会显得生硬。
