dialog.open属性本身不触发transition，必须用class（如is-open）控制视觉动画，open仅保留语义和无障碍支持；打开时先加class再调用showmodal()，关闭时先移除class、等transition结束再调close()。
dialog.open 属性本身不触发 transition
直接给 <dialog></dialog> 写 transition: opacity 0.3s 并设置 open 属性，动画不会执行。因为 open 是布尔属性，浏览器切换它时没有中间状态——DOM 中 open 要么存在要么不存在，CSS 无法对“有/无属性”做插值过渡。
常见错误现象：<dialog></dialog> 突然弹出、背景遮罩“啪”一下出现、关闭时直接消失。
- 必须用 class（如
is-open）控制视觉状态，open只保留语义和无障碍支持 -
open属性仍要手动调用showModal()或show()，否则屏幕阅读器无法识别模态上下文 - 初始样式里必须定义可动画的起始值，比如
opacity: 0，不能只在.is-open里写opacity: 1
正确写法：class 切换 + open 同步控制
打开流程分两步：先加 class 触发动画，再调用 showModal()；关闭则相反——先移除 class，等 transition 结束后才调用 close()。
示例关键 CSS：
dialog {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
dialog.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
-
pointer-events: none → auto不能过渡，所以必须靠 class 切换时机控制交互启用 - 不要用
display: none或visibility: hidden初始隐藏——<dialog></dialog>默认就是不可见的，但需显式设opacity: 0才能过渡 - 若用
showModal()，记得在 JS 中捕获click或keydown关闭逻辑，别依赖close事件来触发 class 移除（太晚）
::backdrop 的淡入必须单独声明
<dialog></dialog> 的遮罩层是伪元素 ::backdrop，它不继承 dialog 的 transition，也不能用 JS 操作。想让它淡入，必须显式写：
dialog::backdrop {
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
}
dialog.is-open::backdrop {
background: rgba(0, 0, 0, 0.6);
}
- 不能写
transition: all，部分浏览器会忽略::backdrop的过渡 - iOS Safari ≤15.4 对
::backdrop支持不稳定，建议加will-change: background提前提示渲染引擎 - 别试图给 backdrop 加
opacity动画——它只接受background的 rgba 透明度变化
移动端 Safari 的闪动和卡顿怎么压住
2026 年 7 月实测，iOS Safari 在快速开关 dialog 时仍有偶发重绘延迟或末帧闪一下，尤其在页面已滚动状态下。
- 给
<dialog></dialog>加transform: translateZ(0)或will-change: opacity, transform强制 GPU 渲染 - 避免在
.is-open里用scale()或复杂box-shadow，Safari 对这些属性过渡优化差 - 关闭时，监听
transitionend事件再调用close()，别用固定 timeout——不同设备帧率不同 - 如果弹窗内容含 iframe 或 video，首次打开前先预加载，否则动画中途可能卡顿
真正容易被忽略的是：transition 时间设成 0.15s 或 0.5s 都不合适——前者人眼难感知，后者拖慢操作节奏。0.25–0.35s 是当前多数设备上最稳的区间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
