details的toggle事件仅通知状态变化，需手动通过max-height/opacity等CSS属性配合transition实现动画，关键在强制重排、避免display/height动画失效，并用classList控制状态防冲突与连点错乱。
details元素的toggle事件本身不驱动动画，得手动控制CSS属性
浏览器原生的 toggle 事件只是个状态通知钩子，它不会自动让内容展开/收起带过渡效果。你看到的“突然出现”或“瞬间消失”，就是因为没干预渲染层的可动画属性。
真正起作用的是对 max-height、opacity 或 transform 的动态设置，并配合 transition。关键在于：在事件回调里先强制重排（比如读取 offsetHeight），再改目标值，否则浏览器会合并两次样式变更，跳过中间帧。
- 必须用
max-height（不能用height）——因为内容高度不确定，而max-height: 0→max-height: 500px可以触发过渡，且兼容性比height好 - 设
max-height初始值时别写死成0就完事，要先设为0，再立刻读一次offsetHeight，再设成scrollHeight，否则动画不触发 -
details[open] summary这类选择器可以加transform动画（如箭头旋转），但必须配transition，且只响应open属性变化，不是 hover
为什么直接 transition display 或 height 会失效
display 根本不是可动画属性，写 transition: display 0.3s 完全无效；height 虽然能动，但要求目标值是具体数字（不能是 auto），而多数场景下你根本不知道内容真实高度。
常见翻车现场：.content { height: auto; transition: height 0.3s; } + .content.closed { height: 0; } —— 这段 CSS 会导致内容被截断或布局错乱，因为 height: 0 会压扁内联盒，破坏文档流。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 优先选
max-height+overflow: hidden组合：安全、可控、无需预知尺寸 - 若内容高度较固定（比如固定行数的文本），可用
height，但必须两端都写具体值（height: 0→height: 48px） - 更轻量的方案是
opacity+transform: scaleY(0)，适合不需要精确高度控制的场景
transition 和 animation 混用会冲突，别在 toggle 里切 animation-play-state
有人想用 animation 做展开收起，然后在 toggle 里控制 animation-play-state。这很危险：一旦动画正在运行中，JS 修改 play-state 容易导致帧丢失或状态错位；更糟的是，内联样式（element.style.animationPlayState = 'paused'）优先级高于 class，后续 class 切换可能失效。
正确做法是把所有动效逻辑交给 class 控制，JS 只负责 classList.toggle()：
- 展开态用
.details-open .content设置max-height: 500px; opacity: 1; - 收起态用
.details-closed .content设置max-height: 0; opacity: 0; - CSS 里统一写
.content { transition: max-height 0.3s ease, opacity 0.2s ease; }
移动端快速连点导致状态错乱，得加防抖或禁用期间锁定
用户手快连点两次，details.open 可能从 false → true → false，但 JS 里的 max-height 设置还没执行完，就会出现“刚展开又收起一半”的撕裂感。
这不是 CSS 问题，是 JS 执行节奏和 DOM 渲染不同步造成的。最简单有效的解法是加一个开关锁：
- 在事件回调开头加
if (details.classList.contains('animating')) return; - 紧接着设
details.classList.add('animating') - 在
setTimeout(() => details.classList.remove('animating'), 300)（时间要和 transition 时长一致） - 或者用
getComputedStyle(el).maxHeight检查当前是否在动画中，但开销略大
细节动画的复杂点不在怎么写 transition，而在于如何让 JS 和 CSS 的节奏咬合住——尤其是当内容高度动态、设备性能不一、用户操作不可控的时候。稍不注意，动画就变成卡顿或跳变。
