open属性无法触发动画因display切换是原子操作，必须用class控制显隐状态；正确做法是JS切换is-open类触发transform/opacity过渡，再配合showModal()/close()及transitionend监听实现平滑缩放。
dialog 的 open 属性本身不触发 CSS transition，直接写 transition: transform 0.3s 没用——必须靠 class 控制显隐状态才能实现缩放动画。
为什么 open 属性不能直接做缩放动画
浏览器把 open 当作布尔开关：true 就显示（display: block），false 就隐藏（display: none）。这个切换是原子操作，没有中间帧，transform 或 opacity 根本没机会渐变。
常见错误写法：dialog { transition: transform 0.3s; } + dialog[open] { transform: scale(1); } —— 这只会让弹窗“啪”一下跳出来，毫无动画感。
正确思路：用 class 表达「正在打开/关闭」的状态，CSS 动画绑定在 class 上，open 只保留语义和可访问性支持。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如何用 class 实现平滑缩放入场/退场
初始样式设为不可见、缩小、禁用交互；加 is-open 类后恢复可见与正常尺寸；JS 控制 class 切换时机，再配合 showModal() / close()。
- 初始状态：
dialog { opacity: 0; transform: scale(0.92); pointer-events: none; } - 激活状态：
dialog.is-open { opacity: 1; transform: scale(1); pointer-events: auto; } - 打开时：先
dialog.classList.add('is-open')，再dialog.showModal()（注意顺序！否则 Safari 可能不聚焦） - 关闭时：先
dialog.classList.remove('is-open')，监听transitionend事件，确认动画结束后再调用dialog.close()
遮罩层（::backdrop）的透明度动画怎么配
dialog::backdrop 是伪元素，不能直接监听事件，但支持 transition——前提是初始透明度明确，且变化由 class 触发。
- 错误写法：
dialog::backdrop { background: rgba(0,0,0,0.7); }→ 遮罩“啪”一下出现 - 正确写法：
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; } - 配合 JS：打开时加
is-open类后，在 CSS 里写dialog.is-open::backdrop { background: rgba(0,0,0,0.7); } - Safari 15.4+ 支持良好；旧版 Safari 需降级 fallback，比如忽略 backdrop 动画或改用内联遮罩 div
点击遮罩关闭时缩放动画容易中断的坑
如果监听 click 后立刻调用 dialog.close()，class 还没来得及移除，动画就断了，视觉上弹窗会“卡住”或闪退。
- 必须解耦：点击遮罩 → 移除
is-open→ 等transitionend→ 再close() - 判断是否点在遮罩上：用
e.target === dialog（Chrome/Edge 可靠），Safari 需 fallback 到坐标判断（e.clientX是否在dialog.getBoundingClientRect()外） - 同时处理
Escape键：监听keydown，捕获e.key === 'Escape'，走同一套 class → transitionend → close 流程 - 别忘了焦点管理：关闭后手动
triggerBtn.focus()，否则键盘用户 Tab 会迷失
缩放动画真正难的不是写 CSS，而是 class 切换、showModal() 调用、transitionend 监听三者之间的时序控制——尤其在 Safari 下，showModal() 和 class 添加的微小顺序差异，都可能导致焦点错位或 backdrop 不渲染。这些细节不调试到真机，很容易被忽略。
