html原生details/summary不支持平滑动画，因css transition对display无效；可行方案是用max-height/opacity、js测量height或clip-path实现过渡。
HTML 原生的 <details></details> + <summary></summary> 不支持平滑切换动画，<input type="radio"> + label 方案无法直接触发动画——这是 CSS 本身限制导致的，不是写法错了。
为什么 display: none 切换没法加 transition
CSS 的 transition 对 display 属性完全无效，这是规范明确规定的。很多初学者试图给 display: block → none 加 transition: display 0.3s，结果毫无反应。
常见错误现象：
- 用
display控制显隐，同时写了transition却看不到动画 - 改用
visibility+opacity，但内容仍占布局空间，导致页面跳动 - 在 Vue/React 里用
v-if或key切换，没配<transition></transition>或 class 触发逻辑
真正可行的思路是：用 max-height、height、transform 或 clip-path 这类可过渡的属性替代 display。
max-height + overflow: hidden 是最稳的纯 CSS 方案
适用于内容高度相对固定（比如标签页面板高度不超过 500px）、不需要精确控制展开终点的场景。它不依赖 JS，兼容性好（IE10+），且能自然过渡。
实操要点：
- 初始状态设
max-height: 0、overflow: hidden、opacity: 0 - 激活时设
max-height: 500px（值需大于内容实际高度，不能用none） - 配合
transition: max-height 0.3s ease-in-out, opacity 0.2s - 若内容动态加载或高度不可预估，
max-height设太大（如1000px）会导致动画过长；设太小会截断
示例关键片段：
.tab-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease-in-out, opacity 0.2s;
}
.tab-panel.active {
max-height: 500px;
opacity: 1;
}
需要精确控制高度？用 JS 测量 + height 过渡
当标签页内容高度差异大、或含异步渲染内容（如图片加载后撑开）时，max-height 容易失准。这时必须用 JS 获取真实 scrollHeight 后再设 height。
注意点：
- 不能直接对
height: auto做 transition —— 浏览器无法计算起止值 - 正确流程：先设
height: 0→ 强制重排（offsetHeight）→ 再设height: element.scrollHeight + "px" - 收起时，先设
height: currentHeight + "px"→setTimeout后设height: 0，否则动画不触发 - 若用
ResizeObserver监听内容变化，记得在销毁时 unobserve，避免内存泄漏
现代方案：用 clip-path 实现无高度依赖的缩放切换
Chrome 107+、Firefox 111+、Safari 16.4+ 支持用 clip-path: inset() 做裁剪过渡，无需预设高度，也不影响文档流，动画更干净。
适用条件：
- 只支持较新浏览器（不考虑 IE 和旧 Edge）
- 标签页内容为块级容器，顶部对齐（
inset(0 0 100% 0)表示只显示顶部 0px） - 需搭配
will-change: clip-path提升动画性能
简写示例：
.tab-panel {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-panel.active {
clip-path: inset(0);
}
这个方案容易被忽略的是：clip-path 在 Safari 中对 transform 元素有兼容问题，如果面板内用了 transform: scale()，得外层包一层 wrapper 隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
