原生details标签无展开动画，需用max-height+overflow:hidden模拟过渡效果；iOS Safari兼容性最佳方案是设保守max-height值并配合JS动态调整及无障碍聚焦处理。
details标签默认没有展开动画，直接切换会生硬
原生 <details> 标签在移动端用作折叠菜单时，open 属性切换是即时的，没有过渡效果。用户感知上就是“啪一下弹开”，体验差，尤其内容多时更明显。这不是 bug，而是规范本意——它只负责语义和基础交互，动画得自己补。
关键点在于：<details> 的 <summary> 是可点击触发器，但内部内容（<details> 的子节点，除 <summary> 外的部分）不支持直接对 height 做 CSS 过渡，因为它的高度是自动计算的（auto），而 CSS transition 不支持从 auto 到具体值的动画。
- 不能写
transition: height 0.3s然后设height: auto—— 这样动画不会动 - 也不能靠 JS 强制读取
scrollHeight后再设固定高度——这在移动端容易因字体加载、rem/vw 动态缩放导致高度计算不准 - 最稳妥的方式是改用
max-height+overflow: hidden模拟，配合 JS 控制状态
用 max-height 实现平滑展开收起（兼容 iOS Safari）
这是目前在移动端（包括 iOS 15+ Safari）最可靠的做法：放弃原生 open 属性控制，改用 class 切换 + max-height 过渡。好处是不依赖 JS 计算真实高度，也不受字体渲染时机影响。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<details class="menu-details">
<summary>菜单</summary>
<nav class="menu-content">
<a href="#home">首页</a>
<a href="#about">关于</a>
</nav>
</details>CSS 关键部分：
.menu-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-details[open] .menu-content {
max-height: 300px; /* 设一个足够容纳所有内容的保守值 */
}-
max-height值必须是具体数字（如300px），不能是fit-content或max-content（iOS Safari 不支持这些值参与 transition） -
cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 推荐的缓动，比ease更自然 - 如果菜单项动态增减，300px 可能不够或过高；此时需 JS 监听
open事件后重设max-height，但首次加载仍建议用静态保守值保底
需要 JS 配合的场景：动态内容、无障碍聚焦、防止点击穿透
纯 CSS 方案在多数情况下够用，但遇到以下情况必须加 JS：
- 菜单内容由 JS 渲染（比如 Vue/React 组件异步加载后插入），初始
max-height无法预估 → 需在内容渲染完成后读取scrollHeight并设为max-height - 用户用键盘打开
<details>后，焦点应落到第一个可聚焦元素（如第一个<a>），否则不符合 WCAG 2.1 要求 → 需监听toggle事件 - 在 iOS 上，快速连续点击
<summary>可能触发两次open切换，导致视觉抖动 → 需加节流或状态锁
最小必要 JS 示例：
document.querySelectorAll('.menu-details').forEach(el => {
el.addEventListener('toggle', () => {
const content = el.querySelector('.menu-content');
if (el.open) {
// 等内容渲染完成（如用 requestAnimationFrame）
setTimeout(() => {
content.style.maxHeight = content.scrollHeight + 'px';
}, 0);
// 聚焦第一个链接
const firstLink = content.querySelector('a');
if (firstLink) firstLink.focus();
} else {
content.style.maxHeight = '0';
}
});
});移动端真机测试最容易忽略的三个细节
写完代码跑 demo 很顺，一上真机就出问题，通常卡在这三点：
- iOS Safari 对
max-height过渡有渲染延迟，尤其在页面刚加载、字体未就绪时；解决方法是在<body>加font-display: optional或预加载关键字体 - Android Chrome 某些版本（如 112）下，
<summary>的user-select: none默认样式会导致长按误触发文字选择 → 显式设user-select: none防止 - 折叠菜单若放在 fixed 定位的 header 下方，展开时可能被 header 遮挡；不要只靠
z-index，要检查父容器是否设置了transform或will-change，这些会创建新的层叠上下文，让 z-index 失效
动画本身不是难点，难的是让不同设备、不同加载时机、不同内容长度下都保持一致的响应节奏。别指望一次写完就稳，真机连测三天比写两小时代码还重要。
