dialog标签本身不支持transform动画，必须将动画 applied 到子容器（如.dialog-content）；需用animation而非transition，配合open状态与类名手动控制时机，并通过@supports和api检测做兼容性降级。
dialog 标签默认不支持 CSS transform 动画
直接对 <dialog></dialog> 元素写 transform: scale(0) + transition 是无效的——因为浏览器对 <dialog></dialog> 的显示逻辑做了特殊处理：open 属性切换时会强制重置样式，且其内部渲染层与普通元素不同。你看到的“没动画”“闪一下就弹出”，基本都卡在这里。
实操建议：
- 必须用
open属性控制显隐，但动画要作用在它的子容器上（比如一个<div class="dialog-content">） <li>不能给 <code><dialog></dialog>本身设opacity或transform过渡，否则可能触发布局抖动或 Safari 下完全失效 - 动画起点需配合
:not([open])伪类隐藏内容区域，而不是靠display: none—— 否则 transition 不会触发 - 打开时：先
dialog.showModal()，再立即添加is-opening类（用setTimeout(() => {}, 0)或queueMicrotask延迟到下一轮渲染） - 关闭时：监听
animationend（针对.dialog-content的缩放动画），动画结束后再调用dialog.close() - 推荐用
animation而非transition，更可控，且能用animation-fill-mode: forwards锁定终态 - 检测
HTMLDialogElement.prototype.showModal是否存在，不存在则降级为display: block+ 手动加 backdrop 元素 - 不要依赖
::backdrop实现遮罩动画——它不支持 transform，缩放只能作用在 dialog 内容区
缩放动画需要手动管理 open 状态与类名时机
<dialog></dialog> 的 open 属性是同步生效的，但 CSS 动画需要在属性变化后“下一帧”才开始。如果只靠 [open] 选择器驱动 scale，动画会从 1→1 开始（即无变化）。必须拆开：先加类触发动画，再设 open；关闭时先移类、等动画结束再移 open。
实操建议：
兼容性兜底：Safari 15.4+ 才支持 dialog 的 showModal() 和 backdrop
旧版 Safari（包括 iOS 15.4 之前）会把 <dialog></dialog> 当作普通 <div> 渲染，既不居中，也没有半透明遮罩。缩放动画本身能跑，但整体体验断裂。
<p>实操建议：</p>
<ul>
<li>用 <code>@supports (display: dialog) 包裹 dialog 专属样式，避免污染其他浏览器
一个可直接粘贴的最小可用示例
<dialog id="myDialog"><div class="dialog-content">
<p>这是缩放内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</div>
</dialog><button onclick="openDialog()">打开对话框</button>
<style>
dialog {
position: relative;
border: none;
padding: 0;
}
dialog::backdrop {
background: rgba(0,0,0,0.6);
}
.dialog-content {
animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-fill-mode: forwards;
background: white;
padding: 24px;
border-radius: 8px;
margin: 0 auto;
max-width: 90vw;
}
@keyframes scaleIn {
from { transform: scale(0.8); opacity: 0.7; }
to { transform: scale(1); opacity: 1; }
}
dialog:not([open]) .dialog-content {
animation: scaleOut 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes scaleOut {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.8); opacity: 0.7; }
}
</style><script>
const dialog = document.getElementById('myDialog');
function openDialog() {
dialog.showModal();
// 确保动画在 open 后触发
queueMicrotask(() => {
dialog.classList.add('is-open');
});
}
// 关闭时需手动监听动画结束
dialog.addEventListener('animationend', (e) => {
if (e.animationName === 'scaleOut') {
dialog.close();
}
});
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});
</script>
注意：这个例子没封装成组件，但已避开常见坑——比如没对 <dialog></dialog> 本身加 transition，动画只作用于 .dialog-content，且用 animationend 精确控制关闭时机。真实项目里，如果要支持多次快速开关，还得加防抖和状态锁，不然容易出现类名残留或动画错乱。
