details标签不支持css动画，需用javascript监听toggle事件、获取内容高度并内联设置height实现过渡动画，结尾清理样式；推荐cubic-bezier(0.2,0.8,0.4,1.2)模拟轻弹效果。
details标签本身不支持CSS动画，必须用JavaScript控制高度
直接给 <details></details> 或 <summary></summary> 加 transition: height 0.3s ease 没用——浏览器不会对 details 的内置展开/收起行为触发 height 变化。真实 DOM 中，<details></details> 展开时内容是“突然可见”，没有 height 过渡，所以动画必须手动接管。
核心思路：监听 toggle 事件 → 获取内部内容高度 → 用内联 style.height 控制过渡 → 动画结束后清理内联样式。
常见错误现象：
– 直接写 details[open] { transition: height 0.3s; }，无效
– 给 <details></details> 设 overflow: hidden 却没设初始 height，导致动画起点为 0 → 内容“闪现”
– 忘记在动画结束时移除 height，后续 JS 操作或响应式变化会出错
用getBoundingClientRect()获取真实滚动高度，避免offsetHeight截断
offsetHeight 在元素 display: none 时返回 0，而 getBoundingClientRect().height 在元素隐藏但已渲染（比如父元素 visibility: hidden）时仍可读取；但更稳妥的做法是临时设 position: absolute; visibility: hidden; opacity: 0，再测高，避免布局抖动。
实操建议：
- 不要用
scrollHeight—— 它包含溢出内容，可能比视觉高度大 - 确保内容容器有明确的
box-sizing: border-box，否则 padding/border 会干扰高度计算 - 若内容含图片，需等图片加载完成后再测高，否则高度不准；可用
img.onload或await new Promise(r => img.decode().then(r))
用requestAnimationFrame实现弹跳效果（cubic-bezier(0.2, 0.8, 0.4, 1.2)）
CSS 的 cubic-bezier() 不能直接用于 height 动画的“弹跳感”，因为标准 transition 不支持关键帧回弹。真弹跳需要 JavaScript 驱动的多段动画，但轻量级方案是：用一次 transition + 弹性缓动函数模拟“轻微弹跳”。
推荐贝塞尔曲线：cubic-bezier(0.2, 0.8, 0.4, 1.2) —— 它在末尾轻微过冲再回弹，视觉上就是“轻轻一跳”。用法：
details .content {
overflow: hidden;
transition: height 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}
注意：
– .content 必须是 <details></details> 内部的**直接子容器**（不能是 <summary></summary> 后面的文本节点）
– 展开前设 height: 0，展开后设目标高度（如 height: 160px）
– 收起时同样设 height: 0，不能靠 max-height 模拟（它无法精准控制弹跳节奏）
兼容性与性能注意事项
details 在 IE 中完全不支持，Safari 12+ 才支持 toggle 事件，旧版 Safari 需监听 click 并手动判断 open 状态。移动端 iOS Safari 对 height 动画的渲染偶尔卡顿，建议加 will-change: height 提前提示合成器。
容易被忽略的点：
– 多个 <details></details> 共存时，每个都要独立绑定事件，不能共用一个 height 变量
– 若内容高度动态变化（比如用户输入、AJAX 加载），需重新绑定 toggle 事件或提供手动刷新高度的方法
– 使用 matchMedia('(prefers-reduced-motion: reduce)') 检测用户偏好，开启后直接跳过动画，设 height: auto
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
