dialog 的 open 属性不触发 transition，需用 is-open 类解耦语义与视觉状态：初始设 opacity:0/transform:scale(.95)/pointer-events:none，.is-open 中设目标态并配合 showmodal() 与 transitionend 精确控制动画时序。
dialog 的 open 属性不触发 transition，必须用 class 控制动画
直接给 dialog 元素写 transition: opacity 0.3s 并设置 open 属性，动画完全不会执行——因为 open 是布尔属性，切换时 DOM 状态跳变，浏览器不生成中间帧。你看到的永远是“啪”一下出现或消失。
正确做法是把视觉状态和语义状态解耦：open 只保留语义（供屏幕阅读器识别、键盘焦点管理），动画由自定义 class（如 is-open）驱动。
- 初始样式必须显式声明可过渡值：
dialog { opacity: 0; transform: scale(0.95); pointer-events: none; } -
.is-open类里设目标态：opacity: 1; transform: scale(1); pointer-events: auto; - 打开时顺序不能错：先
dialog.classList.add('is-open')，再调用dialog.showModal() - 关闭时不能直接
dialog.close()，否则动画中断；必须先移除 class，等transitionend后再 close
::backdrop 的淡入必须手动初始化并加 transition
dialog::backdrop 是伪元素，不继承父级 transition，且默认没有透明度过渡。只写 background: rgba(0,0,0,0.6)，遮罩层会“啪”一下弹出，毫无渐变感。
关键点在于：它需要明确的起始透明度 + 显式 transition 声明。
- 必须写：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; } - 配合 JS，在打开时同步触发变化（例如通过添加
is-open类控制 backdrop 背景色） - Safari 15.4+ 支持良好；旧版 Safari 需用
@supports not (selector(::backdrop))补 fallback 遮罩层 - 别依赖
dialog.style.backdropFilter = 'blur(0)'做过渡主体——它不参与 backdrop 渲染逻辑，容易错位
pointer-events 和 visibility 切换时机必须严格匹配动画帧
动画期间用户还能点到未完全显示的内容，或关闭后点击仍生效，大概率是 pointer-events 没跟上视觉状态。而 pointer-events: none 本身无法 transition，只能靠 class 切换时机硬控。
- 默认状态设
pointer-events: none，确保动画开始前不可交互 -
.is-open中设pointer-events: auto，且该 class 必须在showModal()前添加（否则焦点可能落在背景页） - 绝对不要用
display: none或visibility: hidden配合 opacity 做显隐——前者让元素脱离渲染树，transition 直接失效；后者虽保留布局但会阻断动画重绘 - 推荐始终用
visibility: visible，仅靠opacity和transform控制显隐，再配pointer-events精确开关交互
关闭时序与 backdrop 同步是视觉一致性的关键
如果监听点击 backdrop 后直接调用 dialog.close()，::backdrop 会瞬间消失，而 dialog 主体还在退场动画中，造成视觉撕裂——就像遮罩提前撤走，弹窗孤零零悬在半空。
- 正确流程：点击 backdrop →
dialog.classList.remove('is-open')→ 监听transitionend→ 在回调中调用dialog.close() - Escape 键同样处理：
dialog.addEventListener('cancel', e => { e.preventDefault(); dialog.classList.remove('is-open'); })，再统一走 transitionend 关闭 - 注意：Safari 15.4–16.3 存在 bug，
e.target === dialog可能不成立，需 fallback 判断点击坐标是否落在视口中心区域 - transition 时间建议落在 0.25s–0.4s 区间：太短人眼难感知，太长拖慢操作反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
