height: auto无法参与transition，因其非数值、不可插值；正确做法是JS读取offsetHeight获取真实高度，再以具体像素值设置height并配合overflow: hidden实现过渡。
动态内容加动画不是给元素套个 transition 就完事，关键得避开 display: none 和 height: auto 这两个“动画杀手”。否则高度突变、闪跳、根本不动，都是常态。
为什么 height: auto + transition 不生效？
因为 height: auto 不是数值，浏览器无法计算“从 0px 到 auto”的中间帧。transition 只认具体数字（如 height: 0px → height: 124px），不认 auto。
- 常见错误：写
transition: height 0.3s，但元素初始是height: auto，切换 class 后还是height: auto→ 动画完全不触发 - 正确思路：用 JS 先读出内容撑开后的实际高度，再把那个具体像素值设为
style.height - 隐藏阶段不能用
display: none，得用height: 0+overflow: hidden，这样 height 才可过渡
怎么用 JS 动态算高度并触发动画？
核心是两步：先强制渲染出目标高度，再设置起始高度为 0 并加过渡类。顺序错一点，动画就卡住或跳变。
- 添加内容后，先让元素
style.height = 'auto'，再立刻读offsetHeight得到真实高度 - 接着马上设
style.height = '0px'，再用void el.offsetHeight强制重排，确保浏览器“看到”这个 0px 状态 - 最后加动画类，比如
el.classList.add('expand-active')，CSS 里定义height: [刚才读到的值]px - 收起时反过来：先读当前
offsetHeight，再设height为目标值，加类后设回height: 0
transition 和 animation 混用会打架吗？
会，尤其在同一个属性上同时存在。比如你既写了 transition: height 0.25s，又用 @keyframes 控制 height，浏览器可能丢帧、回退、或只执行其中一个。
- 动态高度动画场景下，**只用 transition**，别掺 animation；animation 更适合固定节奏的循环动效（如 loading 转圈）
- 如果内容区域还要配合 opacity 或 transform 入场，可以分开控制：
transition: height 0.25s, opacity 0.2s，但确保 opacity 不被其他动画覆盖 - 避免
transition: all 0.3s—— 它会把 color、border 等意外变化也拖进动画，导致抖动
移动端 Safari 高度动画卡顿怎么办？
iOS Safari 对 height 过渡优化差，尤其在快速增删内容时容易掉帧。这不是代码错，是渲染层没对齐。
- 必须加
will-change: height，但只在动画开始前 1–2 帧动态加，动画结束立刻移除（el.style.willChange = ''） - 容器加
transform: translateZ(0)或backface-visibility: hidden，强制 GPU 合成 - 别在动画中频繁调用
getBoundingClientRect()或offsetHeight，它们会触发同步布局计算，直接拉垮帧率 - 高度变化超过 200px 时，考虑改用
transform: scaleY()替代 height —— 它能 GPU 加速，但要注意子元素文字缩放问题
真正难的不是写出第一版动画，而是让每次内容增删都稳定触发、不跳、不卡、不回弹。这些细节藏在 JS 重排时机、CSS 层合成策略和 Safari 的渲染癖好里，漏掉一个，用户就看到“抽搐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
