dialog的open属性无法触发css过渡动画，必须用is-open类控制视觉效果，同时保留open以保障可访问性和语义功能；需分别为dialog和::backdrop显式设置transition，并在transitionend中安全调用close()。
dialog的open属性本身不触发transition
直接给dialog写transition: opacity 0.3s没用——因为open是布尔属性，切换时没有中间状态，浏览器不会启动过渡。你看到的是“啪”一下弹出或消失，不是动画。
必须放弃依赖open控制视觉，改用 class（比如is-open）驱动样式变化。但open仍要保留：它负责语义、键盘导航（Tab/Escape）、屏幕阅读器支持和 backdrop 的生成。
- 打开流程：先添加
is-open类 → 再调用dialog.showModal() - 关闭流程：先移除
is-open类 → 监听transitionend→ 在回调里调用dialog.close() - 初始 CSS 必须包含可过渡的起始值，比如
opacity: 0; transform: scale(0.95);
dialog和::backdrop都要单独配transition
::backdrop不是子元素，不能继承父级 transition，必须显式声明。否则 dialog 动了，背景还是“硬切”。
常见错误是只写dialog { transition: opacity 0.25s; }，却忘了 backdrop。
- dialog 默认样式加：
opacity: 0; transform: translateY(10px); pointer-events: none; -
.is-open里写：opacity: 1; transform: translateY(0); pointer-events: auto; - backdrop 必须单独设：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.3s ease; } - 配合 class 控制 backdrop 颜色：
.is-open::backdrop { background: rgba(0,0,0,0.5); }
transitionend监听必须带once且只监听一次
dialog 可能多次开关，如果用addEventListener不加{ once: true }，会累积监听器，导致关闭逻辑执行多次——比如dialog.close()被连调三次。
更隐蔽的问题：transitionend 在 opacity 和 transform 上都会触发，若两个属性都动，事件可能触发两次。
- 稳妥写法：
el.addEventListener('transitionend', handler, { once: true }); - 精准过滤（可选）：
if (e.propertyName === 'opacity') { ... } - 别在 handler 里再操作
el.style.opacity，避免再次触发 transitionend
JS操作class比直接改style更可靠
用el.classList.add('is-open')比el.style.opacity = '1'安全得多——前者触发重排自然分帧，后者容易因浏览器优化合并渲染，导致“一闪而过”。
尤其当 dialog 是动态插入 DOM（比如document.createElement('dialog')）后立即操作，style 赋值很可能失效。
- 确保元素已挂载：
document.body.appendChild(dialog)之后再操作 class - 批量处理多个 dialog 时，避免同步循环加 class；可用
setTimeout(() => el.classList.add('is-open'), i * 50)错开起始时间 - 过渡时长建议落在
0.25s–0.4s之间；0.1s人眼难察觉，0.8s已明显拖慢交互
真正容易被忽略的是：backdrop 的透明度过渡必须用background，不能用opacity——::backdrop不支持 opacity 动画，写了也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
