必须用class控制dialog动画，因open属性切换无中间帧；需显式设opacity/transform初值、手动配置::backdrop过渡、严格按class→showmodal/close时序操作，并同步pointer-events与焦点管理。
dialog 标签本身不支持直接用 open 属性触发动画，所有 CSS 过渡（如淡入、缩放）必须靠 class 控制，否则只会“啪”一下闪现。
为什么直接写 transition: opacity 0.3s 没用
open 是布尔属性，切换时 DOM 状态跳变，浏览器不会生成中间帧。即使你写了完整的 transition 规则，dialog 也不会从 opacity: 0 渐变到 opacity: 1。
- 常见错误现象：
dialog打开瞬间出现，无任何动画，哪怕 CSS 里写了transition -
open只负责语义和可访问性（如焦点管理、屏幕阅读器识别），不是视觉开关 - 必须用 class（例如
is-open）驱动样式变化，open属性仍要保留，仅作辅助 - 初始样式必须显式声明可过渡的值：比如
opacity: 0、transform: scale(0.95)、pointer-events: none
dialog::backdrop 的透明度过渡必须手动设初值
dialog::backdrop 是伪元素，不继承 dialog 的 transition，也不自带透明度过渡。只写 background: rgba(0,0,0,0.6)，遮罩会“啪”一下弹出。
- 正确写法：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; } - 配合 JS 在打开时添加
is-open类，或设置dialog.style.backdropFilter = 'blur(0)' - 不能对
::backdrop写opacity—— 它会影响整个dialog（含内部文字），而不仅是遮罩层 - 旧版 Safari 或 polyfill 环境下
::backdrop样式可能完全失效，需运行时检测：if ('showModal' in HTMLDialogElement.prototype)
打开和关闭的 JS 时序不能错
动画是否流畅，关键在 class 切换与 showModal()/close() 的调用顺序。顺序一错，动画就中断或卡住。
- 打开流程：
dialog.classList.add('is-open')→dialog.showModal()（不能反过来） - 关闭流程：
dialog.classList.remove('is-open')→ 监听transitionend→ 在回调中调用dialog.close() - 点击 backdrop 关闭时，别直接
dialog.close()；应监听click，判断e.target === dialog后再移除 class - Esc 键也要走同一套流程：监听
cancel事件 → 移除is-open→ 等transitionend→close()
pointer-events 和焦点管理容易被忽略
动画期间用户能点到未完全显示的内容，或关闭后还能点，往往是因为交互状态没跟上视觉状态。
-
pointer-events不支持 transition，必须靠 class 切换控制：.is-open { pointer-events: auto; }，默认设为none - 别用
visibility: hidden配合opacity—— 元素脱离渲染树后，transition 会直接暂停 -
showModal()会自动聚焦第一个可聚焦子元素，但前提是 dialog 内有tabindex="0"或原生可聚焦元素（如button） - 键盘用户按 Tab 仍能切到背景？说明焦点没锁住——这是 WCAG 违规，不是“看起来还行”的问题
dialog 动画可用的，不是写多少 CSS，而是 class 切换、JS 时序、::backdrop 初始化、焦点控制这四件事严丝合缝。漏掉任意一个，都会在某个浏览器或某种操作路径下崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
