dialog 元素默认不支持 transition 动画，因 open 属性为布尔值切换，不触发 CSS 过渡；需通过 open/close 事件配合 class 切换（如 is-open）并用 requestAnimationFrame 和 transitionend 手动控制显隐与动画时机。
dialog 元素默认不支持 CSS transition 动画
直接给 <dialog> 写 transition: opacity 0.3s 或 transform 是无效的——因为 <dialog> 的显示由 open 属性控制，而该属性切换时是布尔值翻转，不触发 CSS 过渡监听。浏览器不会在 open 变为 true 的瞬间自动添加过渡类或触发重绘时机。
用 open/close 事件 + class 切换手动触发动画
核心思路：监听 dialog 的 open 和 close 事件，在事件中增删动画类（比如 is-open），再靠 CSS 控制显隐和过渡效果。注意必须等 showModal() 或 show() 执行后、元素已挂载 DOM 且处于可见状态，再加类，否则动画起始态可能错乱。
实操建议：
- 初始状态设
<dialog class="dialog--hidden">，CSS 中用opacity: 0; transform: scale(0.95); pointer-events: none; - 在
dialog.showModal()后用requestAnimationFrame延迟一帧再加is-open类，确保样式已计算 - 关闭时先移除
is-open，等 transition 结束（用transitionend）再调用close() - 避免直接监听
close事件来移除类——它在动画开始前就触发了
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
const modal = document.querySelector('dialog');
modal.addEventListener('click', e => {
if (e.target === modal) modal.close();
});
modal.addEventListener('close', () => {
modal.classList.remove('is-open');
});
function openWithAnimation() {
modal.showModal();
requestAnimationFrame(() => modal.classList.add('is-open'));
}
// 关闭逻辑需手动管理
function closeWithAnimation() {
modal.classList.remove('is-open');
modal.addEventListener('transitionend', () => {
if (!modal.open) modal.close();
}, { once: true });
}
backdrop 动画容易被忽略
<dialog> 自带半透明遮罩（::backdrop），但它默认无 transition，且不能直接用 JS 获取或操作。若要给 backdrop 加淡入淡出，必须显式写 CSS：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; }dialog[open]::backdrop { background: rgba(0,0,0,0.6); }- 注意：Firefox 目前不支持
::backdrop的 transition（截至 v128），Safari 和 Chrome 支持良好 - 如需全兼容，可放弃原生 backdrop，改用额外
<div class="backdrop">手动控制
移动端 touch 操作与 focus 状态干扰动画
在 iOS Safari 上，dialog 弹出后常伴随意外滚动或焦点跳转（尤其含表单控件时），导致动画卡顿或中断。这不是动画本身问题，而是渲染层被强制重排。
- 弹窗内第一个可聚焦元素（如
<input>）会自动获得 focus，触发页面滚动；可在showModal()后立即input.focus({ preventScroll: true }) - 避免在
dialog上设overflow: auto，改用固定高度 +overflow-y: auto防止 iOS 拉拽穿透 - 动画期间禁用 body 滚动（
document.body.style.overflow = 'hidden'），但记得在close后恢复
动画本身没问题，真正卡住你的往往是这些隐性交互副作用。
