dialog动画必须用class控制显隐并配合transition类实现，不能依赖open属性；需重置默认样式、显式设置::backdrop过渡、确保焦点管理同步。
dialog 标签本身不带默认动画，直接加 transition 无效；Tailwind 的 animate- 类对它也无作用——因为浏览器不把 open 属性变化当 CSS 变更处理。必须用 class 控制显隐状态，再靠 Tailwind 的 transition- 和 scale- 等工具类写动画逻辑。
dialog 动画必须用 class 触发，不能依赖 open 属性
直接写 <dialog class="transition-opacity duration-300"> 没用：open 是布尔属性，切换时 DOM 瞬间显示/隐藏，没有中间帧。Tailwind 的 opacity-0 → opacity-100 或 scale-95 → scale-100 不会自动过渡。
正确做法是：
- 初始状态加
class="opacity-0 scale-95 pointer-events-none" - 打开前先
dialog.classList.add('opacity-100', 'scale-100', 'pointer-events-auto') - 再调用
dialog.showModal() - 关闭时反向操作：先移除 class，等
transitionend后再dialog.close()
::backdrop 的透明度和 transition 必须显式声明
dialog::backdrop 是伪元素，不继承父级 transition，也不响应 class 切换（除非你用 style.backdropFilter 或额外 class 控制）。
立即学习“前端免费学习笔记（深入）”；
常见错误是只写：
dialog::backdrop { background: rgba(0,0,0,0.6); }
结果遮罩“啪”一下弹出。要让它渐变，得：
- 初始设
background: rgba(0,0,0,0) - 加
transition: background 0.25s ease - 打开时用 JS 设置
dialog.style.backdropFilter = 'blur(2px)'或配合 class 如backdrop-blur-sm（需确保 Tailwind 配置启用了backdropBlur变体）
Tailwind 中重置 dialog 默认样式不能省
Chrome 给 dialog 加了 16px margin，Safari 可能圆角异常或垂直居中偏移。不重置，用 flex 或 grid 布局会错位。
推荐在全局 CSS 或 @layer components 里写：
@layer base {
dialog {
@apply m-0 p-6 border-0 rounded-xl bg-white shadow-lg;
}
}
注意：shadow- 类需在 tailwind.config.js 的 theme.boxShadow 中启用，默认不包含 lg；rounded-xl 在旧版 Tailwind（v3.0 之前）可能不存在，要检查版本。
焦点管理不能靠 showModal() 自动兜底
showModal() 会尝试聚焦第一个可聚焦子元素，但前提是该元素存在且没被 display: none 或 visibility: hidden 隐藏（Tailwind 的 hidden 或 invisible 会导致失败）。
实操要点：
- dialog 内至少有一个
tabindex="0"元素，或原生可聚焦标签（如<button>、<input>） - 避免用
hidden控制内容显隐——改用opacity-0 pointer-events-none+transition - 关闭后手动恢复焦点到触发按钮（
triggerBtn.focus()），否则键盘用户 Tab 键会跳进页面底部
最易被忽略的点：动画结束时机和焦点恢复必须严格同步。哪怕 class 移除了、transitionend 监听了，如果 dialog.close() 调得太早，屏幕阅读器仍会读出已移除的 DOM；而焦点没切回来，键盘流就断在空白页里了。
