v-show无展开动画效果是因为其仅切换display属性，不触发高度过渡；应使用max-height配合overflow: hidden实现，设足够大的值（如500rpx）并注意收尾时机与平台兼容性。
uni-app里用v-show做展开动画为什么没效果？
因为v-show只是切换display: none，不触发CSS高度过渡——浏览器根本不知道高度从多少变到多少。height: auto也无法被transition捕获。真要过渡，得让元素有明确的起始/结束高度值。
用max-height模拟高度过渡的实操要点
这是最轻量、兼容性最好的方案，不用ref计算、不依赖JS动画库。关键在“足够大的max-height值”和“合理收尾”：
- 起始状态设
max-height: 0，溢出隐藏overflow: hidden - 展开时设一个“明显大于内容实际高度”的值，比如
max-height: 500rpx（别用100vh，iOS Safari会卡顿） - 收起后，等过渡结束再把
max-height切回0，否则下次展开可能闪一下（可用@transitionend或$nextTick控制） - 内容含图片或异步加载时，初始
max-height可能不够——优先固定内容区高度，或改用transform: scaleY()降级处理
.detail-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
.detail-panel.active {
max-height: 500rpx;
}
用ref + getBoundingClientRect()获取真实高度的坑
想精确过渡？得JS介入。但uni-app的ref在v-for里不能直接用字符串索引，且getBoundingClientRect()在组件未挂载或v-show为false时返回0：
- 必须等
v-if渲染完成后再调用，推荐在$nextTick里执行 - 别在
onLoad就取高度——列表项DOM还没生成 - 动态内容（如富文本）需监听
font-size变化或用ResizeObserver（H5可用，小程序需polyfill） - 真要精确，不如把详情抽成独立组件，用
props传入预估高度，避免反复测量
小程序平台特别注意的兼容问题
微信/支付宝小程序对max-height过渡支持不一致，部分版本会跳帧或卡顿：
- 微信小程序基础库
2.24.4以下，max-height过渡有概率失效，建议降级为opacity + transform: scaleY() - 支付宝小程序中
rpx单位在max-height里可能计算异常，统一用px更稳 - App端（iOS）若开启
vue.config.js里的optimization.subNVue，动画层可能脱离文档流——禁用或改用原生导航栏
动画本身不是重点，关键是让展开过程不突兀、不卡顿、不误触。真实项目里，80%的场景用max-height配合理想高度就够了，剩下20%才需要上JS测量——别一上来就写一堆ref和getComputedStyle。
