dialog元素不触发CSS transition，因open属性为布尔开关、无中间状态；必须用class（如is-open）控制动画，open仅保留语义与无障碍支持，并单独处理::backdrop过渡及关闭时序。
dialog 元素本身不触发 CSS transition，因为 open 属性是布尔开关，没有中间状态。想有淡入、缩放、滑入等效果，必须用 class 控制动画，open 仅保留语义和可访问性支持。
为什么直接给 dialog 写 transition 没用
浏览器在 open 属性从 false 切到 true 时，不会生成过渡帧——它直接渲染最终样式。即使你写了 transition: opacity 0.3s，只要初始没定义 opacity: 0，浏览器就无从“开始动”。
- 常见错误现象：
dialog突然闪现，毫无过渡感 - 检查点：CSS 中是否为未打开状态明确定义了起始值（如
opacity: 0、transform: scale(0.95)） -
pointer-events: none无法过渡，必须靠 class 切换时机控制交互启用 - 别忘了加
will-change: opacity, transform提升动画性能（尤其在低端设备）
dialog::backdrop 的淡入要单独处理
::backdrop 是伪元素，不能通过 open 属性驱动过渡，必须配合 class 手动控制透明度变化。
- 初始写法：
dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background 0.25s ease; } - 打开时添加 class：
dialog.is-open::backdrop { background: rgba(0, 0, 0, 0.6); } - Safari 15.4+ 和 Chrome/Firefox 支持良好；旧版 Safari 需 fallback（比如用额外
div#backdrop模拟） - 注意：不要用
backdropFilter替代background做淡入，两者过渡行为不一致
打开/关闭的 JS 时序不能错
动画生效的关键在于 class 和 open 状态的切换顺序，稍一颠倒就会卡顿或跳变。
- 打开流程：先
dialogEl.classList.add('is-open')→ 等一帧（requestAnimationFrame）→ 再dialogEl.showModal() - 关闭流程：先
dialogEl.classList.remove('is-open')→ 监听transitionend→ 触发dialogEl.close() - 不监听
transitionend就调close()，会导致 backdrop 突然消失，而内容还在淡出中 -
showModal()会阻塞 JS 执行，但动画仍继续，所以不能依赖它来同步视觉状态
最易被忽略的是 backdrop 和 dialog 主体的过渡必须解耦控制，且 class 切换与 DOM 状态更新之间存在微小但关键的时序差——这个差值决定了用户看到的是“平滑入场”还是“两段式闪烁”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
