原生标签无法实现滑动动画，因display和height:auto不可过渡；应使用max-height+overflow:hidden+transition组合方案，需满足初始max-height:0、展开时设足够大固定值、overflow:hidden、显式声明transition。
原生 <details></details> 标签默认没有过渡动画，想实现「滑动展开/收起」效果，必须绕过它的原生行为，用 max-height + overflow: hidden + transition 组合手动控制——这是目前最稳定、兼容性最好、且不依赖 JS 的方案。
为什么<details></details>不能直接加 transition
浏览器对 <details></details> 的展开/收起是通过切换 display 或内部渲染状态实现的，而 display 属性不可过渡，height: auto 也无法参与 transition。即使你给它写 transition: all 0.3s，也不会产生滑动效果。
- 常见错误现象：加了 transition 没反应，或只闪一下就显隐，无滑动
- 根本原因：
display和height: auto都不是可插值的 CSS 属性 - 替代思路：用
max-height模拟高度变化，配合overflow: hidden截断溢出内容
max-height 过渡的关键参数设置
要让 max-height 动画真正生效，四个条件缺一不可：
- 初始状态必须设
max-height: 0（不能是none或auto） - 展开状态设一个「足够大但不过分夸张」的固定值，比如
max-height: 500px；若内容超长，建议用 JS 动态读取scrollHeight后加 20px - 必须配
overflow: hidden，否则内容会撑开容器、破坏动画节奏 -
transition必须显式声明max-height，不要用all，避免触发其他不可控属性动画
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible-content.open {
max-height: 500px;
}
如何避免动画卡顿或截断
实际项目中最容易踩的坑是高度预估不准，导致动画中途戛然而止，或内容被裁切：
- 别用
max-height: 100vh或100%：它们在 flex/grid 容器中常失效，且可能触发滚动条抖动 - 别设太小的上限（如
200px）：内容略高就会被截断，用户看不到全貌 - 推荐做法：给容器加
padding-bottom: 20px，然后设max-height: calc(内容最大行高 × 行数 + padding)；或 JS 初始化时动态赋值element.style.maxHeight = element.scrollHeight + 'px' - 如果内容含图片，确保图片加载完成后再触发动画，否则
scrollHeight可能偏小
要不要用 JavaScript 控制状态
纯 CSS 方案（如 checkbox + :checked）能跑通，但交互链路脆弱：无法响应外部状态变更、不支持键盘 Enter 触发、也不方便做手风琴（accordion）逻辑。实际项目中建议保留轻量 JS：
- 监听点击事件，切换
.open类即可，不用操作style属性 - 手风琴场景下，用
querySelectorAll('.collapsible-item')找到其他项，统一移除.open - 需要支持键盘访问时，在
summary或按钮上加tabindex="0"和keydown监听Enter/Space
复杂点在于：动画结束时机难精确捕获——transitionend 事件可能因用户快速连点多次触发错乱，建议用节流或状态锁（isAnimating）兜底。这点容易被忽略，但直接影响多面板切换时的体验一致性。
