直接用height: 0→auto无法实现transition动画，因auto不可插值；可行方案有三：JS测量scrollHeight后设具体height值、用足够大的max-height过渡（如500px）、或用transform: scaleY()替代以获GPU加速。
transition 怎么配合 height 实现折叠动画
直接对 height 用 transition 做展开收起，多数情况下会失效——因为从 height: 0 到 height: auto 无法计算过渡中间值，浏览器不支持 auto 的插值动画。
可行做法是用具体像素值替代 auto，常见有三种路径：
- 提前用 JS 测量内容高度，设为
height的目标值（如element.style.height = measuredHeight + 'px'） - 改用
max-height过渡（设一个足够大的安全上限，比如max-height: 500px），避免 JS 测量 - 用
transform: scaleY()+overflow: hidden，性能更好但需注意子元素内联样式或绝对定位可能错位
推荐优先试 max-height 方案：写法简单、兼容性好（IE10+）、无需 JS 计算。只要内容高度不超过设定值，视觉上就无差别。
点击触发时 transition 不生效的常见原因
最典型的问题是：状态变更和 transition 定义不在同一渲染帧，导致浏览器跳过过渡，直接跳到终态。比如在事件回调里先改 class，再读取 offsetHeight 强制重排，却忘了加 getComputedStyle 或 offsetHeight 触发回流。
立即学习“前端免费学习笔记（深入）”；
正确节奏是：
- 移除/添加控制类（如
is-open） - 立即调用
getComputedStyle(element).height或element.offsetHeight强制同步计算 - 再设置目标高度（或切换另一组 class）
漏掉第二步，transition 就不会启动——浏览器以为你一次性改完，没“变化过程”可过渡。
如何让多个面板互斥展开（手风琴效果）
纯 CSS 无法实现“关闭其他项”的逻辑，必须靠 JS 控制类名。关键点在于：不要只操作当前项，要统一管理状态。
建议结构中给每个面板加唯一 data-id，并用一个变量记录当前展开项 ID：
const currentOpenId = ref(null);
function togglePanel(id) {
if (currentOpenId.value === id) {
currentOpenId.value = null;
} else {
currentOpenId.value = id;
}
}
然后在模板中用条件判断：class="panel" :class="{ 'is-open': currentOpenId === item.id }"。这样任意时刻最多一个 is-open 生效，transition 自然只在它身上运行。
别用 display: none 配合 transition——display 变更会直接中断动画，且无法过渡。
移动端点击无响应或动画卡顿怎么办
iOS Safari 和部分安卓 WebView 对 height 过渡的重绘优化较差，尤其内容多时容易掉帧。此时应避开布局属性，转向合成层动画：
- 用
transform: scaleY(0)→scaleY(1)替代height变化 - 确保面板容器有
will-change: transform或transform: translateZ(0)提前升层 - 禁用
user-select: none防止长按触发菜单干扰点击
另外，iOS 上 :active 伪类默认延迟 300ms，需加 touch-action: manipulation 到按钮上消除延迟。否则点下去要等半秒才触发 is-open 切换，动画看起来像“卡住”。
复杂交互里，transition 只负责视觉反馈，状态管理和边界处理还得靠 JS 把控；别指望纯 CSS 手风琴能覆盖所有折叠/嵌套/异步加载场景。
