dialog.showmodal() 不能直接触发 transition，因为它仅激活模态状态而不改变可动画的 css 属性；淡入动画必须通过 class 控制，open 属性仅用于语义和可访问性。
dialog.showModal() 为什么不能直接触发 transition
因为 showModal() 只是激活 dialog 的模态状态，它不改变任何 CSS 属性——open 属性虽被设为 true，但这个布尔属性本身不可动画，浏览器不会在 DOM 中产生中间状态（比如 opacity 从 0 到 1 的逐帧变化）。所以即使你写了 transition: opacity 0.3s，也完全没机会执行。
淡入动画必须靠 class 控制，不是靠 open 属性
正确做法是：用 class 触发样式变化，open 仅保留语义和可访问性支持。常见错误是只监听 open 值变化来加 class，但更稳妥的是手动控制 class 切换时机：
- 打开前：确保 dialog 已挂载，且初始样式含
opacity: 0; transform: translateY(20px); pointer-events: none; - 打开时：先
dialog.classList.add('is-open')，再调用dialog.showModal() - 关闭时：先
dialog.classList.remove('is-open')，监听transitionend后再调用dialog.close() - CSS 中必须写全过渡声明：
transition: opacity 0.25s ease, transform 0.25s ease;，不能用all
::backdrop 淡入要单独处理
::backdrop 是伪元素，无法通过 class 绑定事件，也不能靠父级 class 自动继承过渡效果。它默认出现就是满透明度，没有中间态：
- 必须显式设置初始 backdrop 样式：
dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background 0.3s ease; } - 配合
.is-open类，在 JS 中同步修改 backdrop 背景色或 opacity（Safari 下推荐改background，而非opacity） - 别试图给
::backdrop加pointer-events或监听点击——它不响应事件，点击关闭需靠坐标判断或额外按钮
Safari 下 dialog 居中和 backdrop 行为容易失效
这不是 bug，而是 Safari 对 dialog 渲染逻辑的实现差异：
-
dialog必须是直接子元素；嵌套在<main></main>、<div style="position: relative"> 或任何带 <code>transform的父容器里，都会导致居中偏移或 backdrop 不跟随滚动 - 不要用
top: 50%; left: 50%; transform: translate(-50%, -50%)定位，这在 Safari 中会破坏 backdrop 渲染 - 关闭后焦点不会自动回到触发按钮，Safari 尤其明显——必须手动
triggerBtn.focus() -
dialog.returnValue在 Safari 中始终为空字符串，传值逻辑需 fallback 到 data 属性或事件参数
真正麻烦的不是写不出动画，而是 Safari 下 backdrop 和焦点行为不一致，且这些异常往往只在真实设备或辅助技术下才暴露出来。
