max-height折叠动画卡顿主因是强制同步布局和合成层失效，应改用transform:scaleY()并配合will-change优化。需动态读取scrollHeight设置目标高度，避免固定值导致拖沓或截断，iOS Safari需特别注意overflow和键盘交互影响。
用 max-height 做折叠动画卡顿，大概率不是代码写错了，而是浏览器在反复重排或合成层没对齐——尤其在 iOS Safari 和低端 Android 上，max-height: 0 → 500px 这种硬编码值会直接触发 layout 抖动，动画一卡就断。
为什么 max-height 动画容易卡
浏览器无法对 auto 或 none 做插值，所以必须用具体像素值过渡；但设成固定值（比如 500px）又会导致两种问题：内容实际高度远小于该值时，动画拖沓；内容超过该值时，被截断。更隐蔽的是，max-height 变化会强制触发同步布局计算（Forced Synchronous Layout），尤其在连续点击或快速滚动中，主线程反复被拉停。
- 每次展开前读取
scrollHeight是必须的，不能靠预估 -
overflow: hidden必须始终存在，否则动画失效且内容溢出 - 不要同时过渡
padding、border、box-shadow—— 它们不走合成通道，会拉低帧率 - iOS Safari 对
max-height的渲染优化弱，连续点击易跳变，需加will-change: max-height提前提示
如何动态设置 max-height 值
静态值是卡顿主因，正确做法是在 JS 中实时读取并内联设置目标高度，确保过渡起止点精准匹配内容尺寸。
- 收起时先移除
max-height内联样式，再加is-collapsed类触发max-height: 0 - 展开时先强制重排：
element.offsetHeight（空读一次），再设element.style.maxHeight = element.scrollHeight + 'px' - 过渡结束后（监听
transitionend），清除内联max-height，只留 class 控制状态 - 避免在
transitionend回调里立刻读取scrollHeight—— 此时 DOM 可能还没完全渲染，建议加requestAnimationFrame延迟一帧
替代方案：用 transform: scaleY() 更稳
当内容高度差异大、或需频繁交互时，max-height 方案维护成本高；scaleY() 走 GPU 合成路径，不触发布局，iOS 和安卓兼容性更好，视觉上虽是“缩放”而非“拉伸”，但用户感知几乎无差别。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 容器需设
transform-origin: top，保证从顶部向下展开 - 初始状态：
transform: scaleY(0); transform-origin: top; - 展开状态：
transform: scaleY(1);，配合opacity淡入 - 务必加
will-change: transform（仅展开前 set，收起后 remove），否则 iOS Safari 不启用硬件加速 - 慎用
scaleY()配合border-radius或box-shadow—— 缩放会放大模糊半径，导致重绘压力陡增
移动端 Safari 特别注意的坑
iOS 15+ 的 WebKit 对折叠动画有隐式限制：一旦元素父容器有 overflow: hidden 或 clip-path，scaleY() 动画可能被降级为软件渲染；而 max-height 在键盘弹出、页面切后台再切回时极易中断。
- 禁用
body { overflow: hidden }—— 它会让整个页面合成层失效，所有子元素动画都变卡 - 展开/收起过程中，避免任何对
getBoundingClientRect()、offsetHeight的调用 - 按钮点击后立即
focus()输入框？暂停动画，等键盘收起后再恢复 —— 否则动画大概率丢帧 - 真机测试比模拟器重要得多；Safari 开发者工具里的 Layers 面板要常看，确认折叠区域是否真的在独立合成层里
最麻烦的不是选 max-height 还是 scaleY，而是状态同步和时机控制：JS 判断状态不能只看 class，得结合 getComputedStyle 读取当前 max-height 值；动画未结束就再次点击，必须 cancel 当前 transition 并重置样式，否则两个动画打架，视觉就糊了。
