dialog 元素不触发 CSS 过渡动画，因其 open 属性切换无中间状态；需用 class（如 is-open）控制动画，open 仅保留语义与无障碍支持，并单独处理 ::backdrop 过渡及关闭时序。
dialog 元素不触发 CSS 过渡动画？检查 open 属性是否被跳过
HTML5 <dialog></dialog> 默认用 open 布尔属性控制显隐，但这个属性是“立即生效”的——浏览器不会在 open 从 false 变 true 的瞬间触发 transition，因为 DOM 中没有中间状态（比如 opacity: 0 → 1 的渐变过程）。
常见错误现象：dialog 突然弹出、没有淡入/缩放效果，即使写了 transition: opacity 0.3s, transform 0.3s 也没用。
- 必须手动切换 class（如
is-open），而不是只依赖open属性 -
open属性仍需保留（用于语义和无障碍支持），但视觉动画要靠 class 控制 - 打开时：先添加 class，再设置
dialog.open = true；关闭时：先移除 class，等 transition 结束后再调用dialog.close()
transition 无效？确认 dialog 初始状态有可过渡的样式
很多动画失效是因为初始状态没设对。CSS transition 不会从“无定义”开始过渡，比如没写 opacity: 0，只在 .is-open 里写 opacity: 1，那浏览器不知道从哪开始动。
使用场景：想实现淡入+向上滑入效果。
立即学习“前端免费学习笔记（深入）”；
- 给
<dialog></dialog>设默认样式：opacity: 0; transform: translateY(20px); pointer-events: none; -
.is-open中写：opacity: 1; transform: translateY(0); pointer-events: auto; - 别忘了加
transition: opacity 0.25s ease, transform 0.25s ease; - 注意：
pointer-events: none → auto不能过渡，所以必须靠 class 切换时机控制交互启用时机
dialog.showModal() 后 backdrop 没动画？backdrop 不是 dialog 子元素
<dialog></dialog> 的半透明遮罩（backdrop）是浏览器自动生成的伪元素，无法直接选中或加 transition。想给它加淡入效果，得用 ::backdrop 伪类 + 手动控制透明度。
常见错误现象：dialog 动画正常，但背景还是“啪”一下出现。
- 必须写
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.3s ease; } - 再在
.is-open触发时，通过 JS 设置dialog.style.backdropFilter = 'blur(0)'或配合 class 控制 backdrop 背景色透明度 - 注意兼容性：
::backdrop在 Safari 15.4+ 和 Chrome/Firefox 支持良好，旧版 Safari 需降级 fallback
关闭后 dialog 残留或闪动？transitionend 事件监听不可靠
用 transitionend 监听关闭完成很常见，但容易漏掉多个属性（opacity + transform）、伪元素（backdrop）或浏览器前缀，导致 dialog.close() 提前执行。
性能影响：监听错事件可能让 dialog 卡在半开状态，或重复触发 close。
- 推荐用
setTimeout替代事件监听，时间取和 CSS transition 一致（如250ms） - 或者监听
transitionend时，检查event.propertyName是否为'opacity'或'transform'，避免 backdrop 或其他样式干扰 - 关闭流程务必顺序：移除
.is-open→ 等待过渡结束 → 调用dialog.close()→ 清理其他状态（如 body 锁定）
最易被忽略的是 backdrop 的过渡必须单独处理，而且它不响应 transitionend，只能靠定时器或同步主 dialog 的时长。实际项目里，这里最容易导致视觉不同步。
