uni-collapse组件默认无过渡动画，应采用max-height+transition方案：设足够大但不过度的max-height值（如500rpx）、配合overflow:hidden，并在过渡后重置max-height；动态内容需预占位或延迟设置高度。
uni-app 里官方 uni-collapse 组件默认不带过渡动画，直接用它写“下拉展开面板”必然卡顿、瞬切——这不是你配置问题，是它压根没绑定 height 动态计算和 transition 逻辑。
为什么 max-height + transition 是最稳方案
因为浏览器能对 max-height 做 CSS 过渡，而 height: auto 不行；v-show 只切 display，完全不触发高度变化；transform: scaleY() 虽然安卓更稳，但 iOS 上可能有渲染毛刺或文字缩放失真。所以生产环境首选 max-height 模拟。
关键不是“精确设 height”，而是设一个“明显大于内容实际高度”的上限值：
-
max-height: 0（收起）→max-height: 500rpx（展开），别用100vh，iOS Safari 会卡顿甚至白屏 - 必须配
overflow: hidden，否则内容溢出破坏动画观感 - 过渡结束后要手动重置
max-height到0，否则下次展开可能闪一下（可用@transitionend或$nextTick控制时机）
动态内容（含图片/异步加载）怎么避免高度撑不开
初始 max-height 设小了，动画中途突然撑高，就会“断掉”——看起来像先弹开再补高。这不是 bug，是 content 高度没稳定就触发了 transition。
应对方式分场景：
- 纯文本或固定结构内容：直接设保守值（如
500rpx）基本够用 - 含图片：给
<image></image>加width和height属性（或用 aspect-ratio），让布局先占位 - 异步加载数据：展开前先设
max-height: 0→ 触发$nextTick→ 再设目标值，或改用transform: scaleY()降级（兼容性稍差但不依赖高度）
别在 uni-collapse-item 上硬加 transition 样式
很多人试过这样写：<uni-collapse-item style="transition: height 0.3s"></uni-collapse-item>，结果毫无反应。原因很直接：组件内部用的是 height: auto 或 display: none 切换，CSS 根本无法过渡 auto 值，也捕获不到从 “无高度” 到 “有高度” 的变化过程。
真正有效的控制点只有两个：
- 自己封装一个
CollapseItem，用v-if控制渲染 +<transition></transition>包裹内容区 - 或者弃用
uni-collapse，用原生<view></view>+max-height+ 状态变量手写，代码量其实不到 20 行
真实项目里，动画是否平滑往往取决于“收尾时机”和“内容高度是否可预期”，而不是过渡时长设成 0.3s 还是 0.4s。尤其在低端 Android 机上，max-height 值设得过大（比如 2000rpx），反而导致动画掉帧——这点很容易被忽略。
