最轻量且兼容性好的弹窗方案是用 opacity + transform + transition 配合 JS 控制显隐；display 无法过渡动画，必须配合 visibility 和 transform 实现平滑效果。
直接用 opacity + transform + transition 配合 JS 控制显隐，是最轻量、兼容性好、且视觉可控的方案。原生 dialog 虽然语义清晰，但动画支持弱（::backdrop 和弹窗主体的过渡需额外 hack），不推荐用于需要平滑入场/退场的场景。
为什么不能只靠 display: none / block 切换
因为 display 是离散属性，浏览器无法对其做过渡动画。哪怕写了 transition: all 0.3s，切换时仍是“啪”一下出现或消失，毫无缓动感。
- 必须用
opacity（控制透明度）和visibility（控制是否可交互）配合transform（控制位移/缩放）来制造动画空间 -
visibility: hidden可以让元素不可见且不响应事件，但保留文档流占位；而display: none会彻底移除渲染，所以动画阶段必须用visibility - 常见错误：只设
opacity: 0却没关visibility，导致弹窗虽透明但仍可点击、聚焦、读屏器可访问
关键 CSS 动画组合写法
一个可靠、居中、带缩放+淡入的弹窗容器应这样写：
`.popup {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s step-end;
}
.popup.active {
opacity: 1;
visibility: visible;
}
.popup-container {
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
transform: scale(0.9);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popup.active .popup-container {
transform: scale(1);
}`
-
step-end在visibility过渡中很关键：它确保visibility: hidden → visible在动画最后一帧才生效，避免中间帧出现“半透明但可交互”的状态 -
cubic-bezier(0.34, 1.56, 0.64, 1)是轻微过冲的缓动，比ease-out更有弹性感，适合入场 - 不要对
display或z-index做 transition —— 它们不支持动画
JS 控制逻辑要避开的坑
动画触发和关闭必须等 CSS 过渡完成后再操作 DOM 状态，否则容易卡顿或行为错乱。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 显示时：先加
.active类，再用setTimeout或getComputedStyle确保样式已应用，再移除遮罩层禁用逻辑（如document.body.style.overflow = 'hidden'） - 关闭时：先移除
.active类，监听transitionend事件，且只监听opacity属性（避免transform结束早于opacity导致提前释放滚动） - Esc 键关闭需在弹窗激活时绑定
keydown，并检查event.key === 'Escape'，关闭后记得解绑，防止多个弹窗叠加导致多次触发 - 点击遮罩层关闭时，务必在
.popup-container上调用event.stopPropagation()，否则点内容区也会触发关闭
移动端要注意 touch-action 和 focus 管理
在 iOS Safari 或安卓 Chrome 中，弹窗打开后若未正确管理焦点，会导致键盘无法唤起、页面意外滚动、甚至 Safari 地址栏反复收放。
- 弹窗显示后，立即用
popupContainer.focus({ preventScroll: true })聚焦到可聚焦元素（如第一个input或button） - 给遮罩层加
touch-action: none，防止 iOS 上下拖拽时误触发页面滚动 - 关闭弹窗后，把焦点还给触发按钮（
triggerBtn.focus()），否则键盘可能残留、读屏器路径中断 - 别依赖
autofocus属性 —— 它在很多移动端浏览器中被忽略或延迟触发
最易被忽略的是：动画结束后的状态清理。比如 body 的 overflow、tabindex 的重置、焦点链修复、以及多个弹窗嵌套时的 z-index 层级叠加逻辑 —— 这些不写进 JS 主流程，上线后第一周必出问题。
