弹出动画的核心是用 transition 控制状态切换，配合 transform/opacity 实现平滑，再以 visibility+opacity 协同避免交互穿透；transition 比 @keyframes 更适合二值开关场景，因它自动响应类名变化、支持反向动画且硬件加速更稳。
弹出动画的核心不是“加个 animation 就完事”，而是靠 transition 控制状态切换时的渐变过程，配合 transform 和 opacity 实现视觉平滑，同时用 visibility 或 display 配合避免交互穿透——错用其中任一环节，都会出现闪动、卡顿、点不中、关不掉等问题。
为什么用 transition 而不是 @keyframes 做弹出动画
弹出框是“开/关”二值状态切换，不是循环或复杂路径动画。@keyframes 适合定义固定轨迹（比如旋转、弹跳），但弹窗的入场/退场依赖 JS 控制类名（如 .popup.active），而 transition 能自动响应类名变化，无需手动触发播放。用 @keyframes 反而要写两套规则（fadeIn 和 fadeOut），且退场时容易因 JS 移除类太快导致动画被截断。
-
transition在属性值变化时自动触发，比如opacity: 0 → 1或transform: scale(0.8) → 1 -
@keyframes需显式调用animation: fadeIn 0.3s，且移除类后动画不会反向执行，退场得另写fadeOut - 浏览器对
transition的硬件加速支持更稳定，尤其在transform和opacity上；而left/top类位移属性会触发布局重排，卡顿明显
visibility + opacity + transition 组合怎么写才不闪
常见错误是只用 opacity 控制显隐：opacity 为 0 时元素仍占布局、可聚焦、能响应点击。必须搭配 visibility: hidden 才真正“不可交互”，但二者过渡节奏不同步就会闪——比如 opacity 还没到 0，visibility 就已设为 hidden，用户会看到内容突然消失。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 入场时：先设
visibility: visible（立即生效），再让opacity从 0 → 1（带transition） - 退场时：先让
opacity从 1 → 0（带transition），等动画结束（用transitionend事件监听），再设visibility: hidden - CSS 中写成：
transition: opacity 0.3s ease, visibility 0s linear 0.3s—— 表示 visibility 延迟 0.3s 后立即切换，正好卡在 opacity 动画结束时刻 - 别用
display: none替代visibility，因为display无法参与transition，会导致动画直接中断
为什么 transform: translate(-50%, -50%) 居中比 margin: auto 更可靠
margin: auto 在 position: fixed 下基本失效，而弹窗必须用 fixed 才不随滚动偏移。用 top: 50%; left: 50% 加 transform 是唯一能精确居中、且不影响文档流的方式。
-
transform不触发重排（reflow），只影响合成层，动画性能远高于修改top/left - 若用
top: 50%; left: 50%; width: 400px; height: 300px; margin-left: -200px; margin-top: -150px，需提前知道宽高，响应式场景下极易错位 - 移动端 Safari 对
inset: 0支持不全，所以遮罩层仍建议用top: 0; right: 0; bottom: 0; left: 0，而非inset - 内容区加
max-width: 90vw; max-height: 80vh; overflow: auto，防止大屏下过宽或小屏下溢出
JS 控制弹窗开关时最容易漏掉的三件事
光写 el.classList.add('active') 不够。真实场景中，键盘焦点、背景滚动、事件冒泡这三点一漏，用户就卡住或误操作。
- 打开后立刻把焦点移到弹窗内第一个可聚焦元素：
popup.querySelector('button, input, [href]')?.focus()，否则键盘用户按 Tab 会跳到页面底部 - 打开时给
加style="overflow: hidden"，否则滚动背景会带动弹窗抖动；关闭时记得恢复 - 遮罩层点击关闭，但必须判断
e.target === overlay，否则点弹窗内容也会触发关闭——这是父子冒泡最常踩的坑 - 监听
Escape键：用keydown（不是keyup），并确保弹窗显示时才监听，关闭后及时removeEventListener
真正难的不是让弹窗“动起来”，而是让它在各种设备、各种交互路径（鼠标、键盘、触摸）、各种 DOM 状态下都保持可访问、不打断用户流。这些细节不写进 JS 逻辑里，只靠 CSS 是撑不住的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
