必须用 class 控制 dialog 动画，open 仅保留语义与无障碍；初始需设 opacity:0/transform:translateY(10px)/pointer-events:none，.is-open 设目标态，transition 写在默认规则中，并用 transitionend（限 opacity）或 setTimeout 保障关闭时机。
dialog.open 属性本身不触发 transition
直接给 <dialog> 写 transition: opacity 0.3s 没用，因为 open 是布尔属性，切换时 DOM 中没有中间状态——浏览器不会在 open=false → true 过程中插帧。你看到的是瞬间弹出，不是动画卡顿，是根本没走过渡流程。
必须用 class 控制动画，open 只保留语义和无障碍支持（比如屏幕阅读器识别、Esc 关闭、焦点管理）。打开时先加 class，再设 dialog.open = true；关闭时先移除 class，等 transition 结束再调 dialog.close()。
初始样式和 .is-open 类怎么写才生效
动画失效最常见的原因是初始值没显式声明。浏览器不会从“未定义”开始过渡，必须明确起点。
-
<dialog>默认样式里必须包含：opacity: 0、transform: translateY(10px)、pointer-events: none -
.is-open里只写目标态：opacity: 1、transform: translateY(0)、pointer-events: auto -
transition必须写在默认规则里：transition: opacity 0.25s ease, transform 0.25s ease，不能只写all - 别漏掉
visibility: hidden和visibility: visible——虽然 visibility 本身不可过渡，但配合step-end可防淡出末尾闪一下
::backdrop 怎么加淡入效果
<dialog> 的遮罩层是浏览器自动生成的伪元素，不能用 class 控制，只能靠 ::backdrop 伪类 + JS 触发 class 切换来间接影响它。
立即学习“前端免费学习笔记（深入）”；
- 默认写：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.3s ease; } - 在
.is-open类生效时，用 JS 同步设置：dialog.style.backdropFilter = 'blur(0)'或直接改 class 控制 backdrop 背景色透明度 - 别给
::backdrop加transition以外的动画属性（比如transform），它不支持
transitionend 监听和关闭时机怎么拿捏
关闭时如果 dialog.close() 调得太早，动画会被中断；太晚又影响响应速度。关键不是等“整个动画结束”，而是等 opacity 过渡完成。
- 监听
transitionend事件时，必须检查event.propertyName === 'opacity'，避免被transform或其他属性重复触发 - 推荐逻辑：移除
.is-open→ 等transitionend（opacity）→ 调dialog.close()→ 再清空 class（防止残留状态） - 移动端 Safari 对
transitionend有时延迟或丢失，加一层兜底：setTimeout(() => dialog.close(), 300)
真正容易被忽略的是：动画结束 ≠ 元素已退出交互流。opacity 到 0 后，pointer-events: none 是否已生效？visibility: hidden 是否已同步？这些状态不同步，就可能点到“看不见却可点”的弹窗上。
