dialog 默认无动画，需用 CSS transition + transform + opacity 配合 JS 控制类名实现淡入缩放效果；打开时先设 display: block 再加入场类，关闭时先加退场类、监听 transitionend 后再 close。
dialog 元素默认没有动画，必须手动加 CSS 过渡
HTML 原生支持 showModal() 和 close()，但打开/关闭瞬间是硬切——既没淡入淡出，也没缩放或滑动。浏览器不提供内置动画，所有动效都得靠 CSS 的 transition + transform + opacity 配合 JS 控制类名来实现。
关键点在于：不能直接对 open 属性做过渡（它不是 CSS 可动画属性），必须监听打开/关闭动作，动态增删 class 来触发 CSS 动画。
- 打开时先设
display: block（否则 transition 不生效），再加入场类（如dialog--enter） - 关闭时先加退场类（如
dialog--leave），等动画结束再调用dialog.close()并移除open属性 - 务必设置
backdrop的过渡，否则遮罩层会闪一下
怎么写一个带淡入+缩放的 dialog 动画
核心是两套 class：入场用 dialog--enter，退场用 dialog--leave，配合 @keyframes 或纯 transition。推荐用 transition 更轻量、更易控制时长。
.dialog {
border: none;
padding: 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: scale(0.95);
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dialog[open] {
display: block;
opacity: 1;
transform: scale(1);
}
dialog::backdrop {
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.25s ease;
}
dialog[open]::backdrop {
opacity: 1;
}
注意：dialog[open] 是触发动画的开关，但必须确保元素已插入 DOM 且初始为 display: none（原生 默认就是），否则第一次 show 会跳过过渡。
JS 控制动画节奏：避免 close() 提前执行
直接调 dialog.close() 会立刻移除 open 属性，导致 CSS 退场动画失效。正确做法是：先加退场 class → 等 transition 结束 → 再 close。
- 用
getComputedStyle(el).transitionDuration获取实际毫秒值（注意单位是字符串，如"0.25s"） - 用
el.addEventListener('transitionend', handler, { once: true })监听一次动画结束 - 点击「确认」或「取消」按钮时，不要直接
dialog.close()，而是先dialog.classList.add('dialog--leave') - 在
transitionend回调里调dialog.close()并清理 class
如果 dialog 内有表单提交逻辑，记得把提交事件绑定在退场前，否则用户点按钮瞬间 dialog 就消失了，提交可能被中断。
兼容性与容易忽略的细节
在 Safari 15.4+、Chrome 37+、Firefox 98+ 支持，但 Safari 旧版本和部分安卓 WebView 仍不支持。别忘了加 polyfill（如 dialog-polyfill），但它默认不支持动画——你得手动给 polyfill 的 wrapper 元素加相同 CSS 类。
另一个坑：dialog 默认垂直水平居中靠的是 margin: auto，但一旦加了 transform，这个居中会失效。解决方法是用 top: 50%; left: 50%; transform: translate(-50%, -50%) scale(...) 替代纯 transform: scale()。
还有：如果 dialog 内部内容高度动态变化（比如加载异步数据），动画过程中 resize 可能导致缩放错位，建议在内容稳定后再触发 showModal()，或用 requestAnimationFrame 延迟加入场 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
