dialog的open属性无法触发动画，须用is-open类控制视觉过渡；需分别设置dialog和::backdrop的transition，监听transitionend并加{ once: true }过滤属性，且初始样式必须定义opacity/transform起始值。
dialog的open属性不触发transition，必须用class控制动画
直接写dialog { transition: opacity 0.3s; }没用——open是布尔属性，切换时没有中间状态，浏览器压根不启动过渡。你看到的是“啪”一下弹出或消失，不是动画。
正确做法是：保留open用于语义、键盘导航（Tab/Escape）、屏幕阅读器支持和::backdrop自动生成；视觉动画全交给is-open这类 class 控制。
- 打开流程：
el.classList.add('is-open')→dialog.showModal() - 关闭流程：
el.classList.remove('is-open')→ 监听transitionend→ 在回调里调用dialog.close() - 初始 CSS 必须有可过渡的起始值，比如
opacity: 0; transform: translateY(10px); pointer-events: none;，不能只在.is-open里写终点值
dialog和::backdrop都要单独声明transition
::backdrop不是子元素，不能继承父级transition，必须显式设置，否则 dialog 动了，背景还是“硬切”。
常见错误是只写dialog { transition: opacity 0.25s; }，却漏掉 backdrop 部分。
立即学习“前端免费学习笔记（深入）”；
-
dialog建议过渡opacity和transform，避免文字缩放模糊 -
dialog::backdrop必须单独设transition: background 0.3s ease; - 配合 class 控制 backdrop 颜色：
.is-open::backdrop { background: rgba(0,0,0,0.5); }
transitionend监听必须加{ once: true }且过滤属性
dialog 可能多次开关，如果用addEventListener不加{ once: true }，会累积监听器，导致dialog.close()被连调多次。
更隐蔽的问题：opacity和transform都动时，transitionend可能触发两次。
- 稳妥写法：
el.addEventListener('transitionend', handler, { once: true }); - 精准过滤（推荐）：
if (e.propertyName === 'opacity') { ... } - 别在 handler 里再操作
el.style.opacity，否则可能再次触发transitionend
初始样式和pointer-events切换时机容易被忽略
pointer-events: none → auto无法过渡，所以必须靠 class 切换来控制交互启用时机——用户不能在动画还没完成时就点到 dialog 内部。
移动端建议加will-change: transform提前提示渲染优化，但别滥用，否则内存开销会上升。
最常被漏掉的三点：::backdrop没配 transition、transitionend没加{ once: true }、初始opacity/transform值没定义——这三处任一缺失，动画就“不动”。
