因为open是布尔属性，切换时dom状态直接跳变，浏览器不生成中间帧，无法触发transition动画；必须用class（如is-open）控制opacity、transform等可过渡属性，并同步处理::backdrop和pointer-events。
dialog 的 open 属性为什么加 transition 没用
因为 open 是布尔属性，切换时 DOM 状态直接跳变，浏览器不生成中间帧——opacity: 0 到 opacity: 1 不会渐变，而是“啪”一下显示或消失。哪怕你写了 transition: opacity 0.3s，也完全不触发。
常见错误现象：<dialog open></dialog> 加了动画样式，但弹窗还是硬弹、没淡入；或者关闭时直接消失，遮罩层和主体不同步。
- open 只负责语义（如屏幕阅读器识别）和可访问性（自动聚焦、
Escape关闭），不是视觉开关 - 动画必须靠 class 控制，比如
is-open，open属性仍要保留，仅作辅助 - 初始样式必须显式声明可过渡的值：不能只在
.is-open里写opacity: 1，得先在dialog规则里写opacity: 0
怎么写 CSS 才能让 dialog 淡入+缩放+ backdrop 渐显
关键不是堆属性，而是每条规则都得对齐“可过渡前提”：初值明确、过渡目标明确、伪元素单独处理。
正确写法示例：
dialog {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
dialog.is-open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0);
transition: background 0.25s ease;
}
dialog.is-open::backdrop {
background: rgba(0, 0, 0, 0.6);
}
-
pointer-events: none → auto不能过渡，必须靠 class 切换时机控制交互启用 - 别用
display: none或visibility: hidden配合 opacity，否则 transition 直接失效 -
::backdrop必须显式设初始background透明度，否则遮罩“啪”一下出现 - 过渡时间建议落在
0.25s–0.4s区间，太短难感知，太长拖慢反馈
JS 控制时序错在哪？关闭后 dialog 还在动，backdrop 却没了
根本原因是 dialog.close() 立即移除 open 属性，导致 ::backdrop 瞬间消失，而 dialog 主体还在退场动画中——视觉撕裂。
正确流程分三步，缺一不可：
- 打开时：
dialog.classList.add('is-open')→dialog.showModal()（顺序不能反） - 关闭时（含点击 backdrop、按
Escape）：dialog.classList.remove('is-open') - 监听
transitionend事件，在回调里调用dialog.close()
还要同步处理焦点：确保 dialog 内有至少一个可聚焦子元素（如 <button></button> 或 tabindex="0"），否则键盘用户 Tab 会切到背景页。
Safari 和旧版浏览器怎么 fallback
Safari 15.4+、Chrome/Firefox 支持良好，但 Safari 15.3 及更早版本不支持 ::backdrop，且部分安卓 WebView 对 dialog 的 showModal() 行为不一致。
稳妥做法是用 @supports 检测：
@supports not selector(::backdrop) {
dialog::backdrop { display: none; }
dialog.is-open { opacity: 1; transform: scale(1); }
}
- 降级时可忽略 backdrop 动画，但保留 dialog 主体的淡入缩放，体验不崩
- 不要试图用 JS 模拟
::backdrop并手动管理 z-index 和点击穿透，复杂度高且易出竞态 - 真正容易被忽略的是：动画期间如果用户能点到未完全显示的内容，大概率是
pointer-events没随 class 同步切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
