dialog 的 open 属性无法触发 css 过渡，因布尔属性切换无中间状态；须用 class 控制显隐动画，并配合 showmodal()/close() 管理语义与焦点。
dialog 标签本身不支持 open 属性触发 CSS 过渡动画，必须用 class 控制显隐状态，open 仅保留语义与可访问性功能。
为什么直接给 dialog 加 transition 没用
因为 open 是布尔属性，切换时 DOM 状态瞬间跳变（open 出现或消失），浏览器没有中间帧可插值，opacity 或 transform 过渡根本不会启动。你看到的“啪一下显示”，就是这个原因。
- 不能写
dialog { transition: opacity 0.3s; }然后只操作dialog.open = true -
showModal()和close()只负责语义和焦点管理，不参与动画流程 - 动画必须和 DOM 状态解耦：class 控制样式变化，JS 控制 class 切换时机
打开动画的正确 JS 流程
先加动画 class，再调用 showModal() —— 否则浏览器可能来不及渲染初始隐藏态就直接显示，导致过渡失效。
- 确保
dialog初始有opacity: 0、transform: scale(0.95)、pointer-events: none - 执行
dialog.classList.add('is-open') - 紧接着调用
dialog.showModal()（此时open属性自动添加，但动画已由 class 触发） - 如果用了
dialog.show()，记得手动管理焦点，否则键盘用户无法 tab 进入弹窗
关闭动画必须等 transitionend 再调用 close()
直接在点击事件里调用 dialog.close() 会中断动画，视觉上弹窗“闪退”或卡在半透明状态。
- 监听
transitionend事件，且限定只响应opacity或transform属性（避免 backdrop 的 background 过渡干扰） - 关闭逻辑应统一：点遮罩、点取消按钮、按 Esc 都走同一套「移 class → 等 transitionend → 调 close()」
-
dialog::backdrop必须单独设初始值：dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; }，否则 backdrop 也是“啪一下出现” - Safari 中
e.target === dialog判断点击遮罩不可靠，建议改用坐标判断 fallback
容易被忽略的可访问性细节
动画再顺滑，焦点没锁住或没回传，对键盘/屏幕阅读器用户就是断层体验。
-
showModal()会自动聚焦第一个可聚焦子元素，但前提是它存在且没被display: none或visibility: hidden隐藏 - 关闭后必须手动把焦点交还给触发按钮：
triggerBtn.focus()，否则 Tab 键会跳到地址栏或页面顶部 -
dialog.returnValue在 Safari 中始终为空字符串，别依赖它传值；如需确认结果，用表单method="dialog"+button[value]，但要接受 Safari 不兼容 - 不要用
display: none隐藏未打开的dialog—— 它会让元素完全脱离可访问性树
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
