dialog 的 open 属性无法触发 transition 动画，必须通过 class（如 is-open）控制样式变化，并严格同步 class 切换与 showModal()/close() 调用时机，同时单独处理 ::backdrop 过渡及 pointer-events 状态。
dialog 的 open 属性不能直接触发 transition
直接给 <dialog open> 加 transition: opacity 0.3s 是无效的——浏览器不会为 open 布尔属性的切换生成中间状态，opacity 会瞬间跳变，动画根本不会执行。
常见错误现象：弹窗“啪”一下弹出来，没淡入、没缩放，哪怕 CSS 里写了完整的 transition 规则。
-
open只负责语义和可访问性（比如屏幕阅读器识别、键盘焦点管理），不是视觉控制开关 - 必须用 class（如
is-open）来驱动动画，open属性仍要保留，但仅作辅助 - 初始样式必须显式声明可过渡的值，例如
opacity: 0、transform: scale(0.95)，不能只在 class 里写目标值
淡入动画必须靠 class 切换 + 合理时序控制
打开时不能先设 dialog.open = true 再加 class，否则动画来不及触发；关闭时也不能直接调用 close()，否则动画中途被砍断。
- 打开流程：
dialog.classList.add('is-open')→dialog.showModal()（或show()） - 关闭流程：
dialog.classList.remove('is-open')→ 监听transitionend事件 → 在回调里调用dialog.close() - 如果用
showModal()，记得监听cancel事件（Esc 或点击 backdrop），并在其中同步移除 class 和延迟关闭
::backdrop 的淡入要单独处理
dialog::backdrop 是伪元素，不继承 dialog 的 transition，且默认没有透明度过渡，所以遮罩层总是“啪”一下出现。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; } - 配合
.is-open类，在 JS 中同步设置：dialog.style.backdropFilter = 'blur(0)'或更稳妥地用 class 控制 backdrop 背景色透明度 - Safari 15.4+ 支持
::backdrop，旧版需 fallback 样式，比如用@supports not (selector(::backdrop))补一层自定义遮罩
pointer-events 和 visibility 容易被忽略
动画期间如果用户能点到未完全显示的内容，或者关闭后还能点，多半是交互状态没跟上视觉状态。
-
pointer-events: none不能用 transition 过渡，必须靠 class 切换时机控制：默认设pointer-events: none，.is-open里设pointer-events: auto - 别用
visibility: hidden配合opacity，否则 transition 会失效——元素脱离渲染树后，变量和动画全部暂停 - 推荐始终用
visibility: visible，仅靠opacity和transform控制显隐，再配pointer-events精确开关交互
open / close() 的调用顺序没对齐，尤其在快速连点或 Esc 关闭时。动画节奏本身倒简单：0.25–0.35s 是舒适区间，再长就拖慢反馈感。 
