dialog缩放动画必须用class（如is-open）控制，open仅保留语义和可访问性；需重置margin/border、用fixed+translate+scale居中，::backdrop须单独设background过渡；关闭时须先移类、再监听transitionend后close。
dialog缩放动画必须用class控制，不能靠open属性
直接给dialog写transform: scale(0.9)加transition没用——open是布尔属性，切换时没有中间状态，浏览器不会触发过渡。你看到的“弹出来”是瞬间的，不是缩放动画。
正确做法是用一个类（比如is-open）来控制显隐和动画，open只保留语义和可访问性支持（如自动聚焦、Esc关闭）。
- 初始样式：
dialog { opacity: 0; transform: scale(0.95); pointer-events: none; } - 打开时加类：
dialog.is-open { opacity: 1; transform: scale(1); pointer-events: auto; } - JS中先
dialog.classList.add('is-open')，再调dialog.showModal() - 关闭时先
dialog.classList.remove('is-open')，监听transitionend后再调dialog.close()
dialog::backdrop也要单独设transition，否则遮罩“啪”一下出现
dialog::backdrop是独立伪元素，不继承dialog的样式，也不响应open变化。只写background: rgba(0,0,0,0.5)会导致遮罩无过渡、硬切。
必须显式声明初始透明背景，并配transition：
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background: rgba(0, 0, 0, 0);
transition: background 0.25s ease;
}
dialog.is-open::backdrop {
background: rgba(0, 0, 0, 0.4);
}
- 别用
opacity控制::backdrop——它会让整个dialog内容也变透明 - Safari 15.4+、Chrome 110+、Firefox 103+ 支持良好；旧版 Safari 可能忽略
::backdrop的 transition - 如果 polyfill 环境（如 dialog-polyfill），
::backdrop根本不存在，得手动插入遮罩 DOM
居中+缩放组合写法要注意 transform 顺序和重置默认样式
想让dialog既居中又缩放，不能只靠transform: translate(-50%, -50%) scale(1)——因为浏览器默认有margin和border，会干扰定位和缩放基准点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键三步必须做全：
- 重置
margin: 0和border: none - 用
position: fixed; top: 50%; left: 50%锚定中心点 -
transform里先translate(-50%, -50%)再scale()，顺序不能反（否则缩放中心偏移）
示例：
dialog {
position: fixed;
top: 50%;
left: 50%;
margin: 0;
border: none;
padding: 1.5em;
border-radius: 8px;
transform: translate(-50%, -50%) scale(0.95);
transition: transform 0.3s ease, opacity 0.3s ease;
}
dialog.is-open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
点击遮罩关闭时缩放动画容易中断，得解耦事件和状态
如果在click事件里直接调dialog.close()，is-open类还没来得及移除，视觉上就会卡住或闪退——动画被强制终止。
必须把关闭逻辑拆开：
- 监听
dialog的click，判断e.target === dialog（点在遮罩区域） - 触发
dialog.classList.remove('is-open') - 监听
transitionend，确认缩放和透明度动画结束，再执行dialog.close() - 同样逻辑也要绑定
keydown监听Escape，保持行为一致
焦点管理不能漏：确保dialog内有至少一个tabindex="0"或可聚焦元素（如button），否则showModal()后键盘用户按Tab会跳到背景页。
