dialog.open属性不触发CSS过渡动画，必须用class（如is-open）控制动画，open仅保留语义与无障碍支持；需显式设置初始样式、单独处理::backdrop过渡，并在transitionend后调用close()。
dialog.open 属性本身不触发 transition
直接给 dialog 写 transition: opacity 0.3s 是无效的——open 是布尔属性，切换时 DOM 状态跳变，没有中间帧，浏览器根本不会启动过渡。你看到的“啪一下出现”，就是这个原因。
必须用 class 控制动画，open 只保留语义和无障碍支持（比如屏幕阅读器识别、Esc 关闭、焦点管理）。动画逻辑和 DOM 状态要解耦。
- 打开流程：先加
is-open类 → 触发 CSS 过渡 → 再设dialog.open = true - 关闭流程：先移除
is-open类 → 等transitionend事件 → 再调用dialog.close() - 别漏掉
dialog::backdrop的过渡：它不是子元素，得单独写dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.3s ease; }
CSS 初始状态必须显式声明可过渡值
很多动画“不动”是因为初始样式没写全。比如只在 .is-open 里写 opacity: 1，但默认状态没设 opacity: 0，浏览器就不知道从哪开始过渡。
推荐默认样式：
立即学习“前端免费学习笔记（深入）”；
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配合opacity，否则过渡直接失效 - 过渡时间建议落在
0.25s–0.4s区间，太短人眼难感知，太长拖慢操作反馈
JS 控制需注意关闭时序与 backdrop 同步
关闭时如果直接 dialog.close()，::backdrop 会立刻消失，而 dialog 主体还在退场动画中，视觉撕裂。
正确做法是监听 transitionend，且只监听一次（避免多次触发）：
function closeDialog() {
dialog.classList.remove('is-open');
dialog.addEventListener('transitionend', () => {
if (!dialog.open) return;
dialog.close();
}, { once: true });
}
- 监听前先检查
dialog.open，防止重复关闭报错 -
::backdrop的透明度变化要和 dialog 主体动画节奏一致，否则背景“先消失”或“后消失”都会破坏整体感 - 移动端 Safari 对
dialog::backdrop的background过渡有兼容性波动，iOS 15.4 之前建议加will-change: background提前提示合成
为什么不能只靠 :modal 伪类或 open 属性做动画
目前没有任何浏览器支持 dialog:modal 或 dialog[open] 触发 transition。这不是 bug，是规范设计使然：open 定义的是“模态状态”，不是“视觉状态”。
强行绑定会导致：
- 动画在 Safari 中完全不执行
- Chrome 下首次打开正常，二次打开因重用 DOM 而跳过过渡
- 无障碍工具可能误判状态，因为
open和视觉呈现不同步
真正容易被忽略的是：动画结束后的 focus 管理。dialog 关闭后，焦点必须手动归还到触发按钮或上一个可聚焦元素，否则键盘用户会卡在空白处——这和淡入淡出无关，但常被一起漏掉。
