弹窗过渡 · Modal Transition
英文：Modal Transition
动效与交互难度：入门 ★
🗣️一句话大白话
弹窗打开/关闭时怎么出现和消失的动效：从小放大淡入（标准）、遮罩同步淡入、弹簧回弹等。弹窗“质感”的第一来源。弹窗动效三件套：遮罩淡入、弹窗体放大淡入、关闭时反向（且更快）。告诉 AI“弹窗从中心 0.92 放大到 1 + 遮罩淡入，300ms”即可。要点：遮罩和弹窗要同节奏（整体一致），关闭比打开快 20-30%；弹窗用放大淡入，不用滑入（那是抽屉的语义）。
🖼️样图参考
🎬真实场景
表单弹窗、确认框、图片预览、登录框
📮你可以这样说
「【图像模型版】[弹窗] 打开时：遮罩 0→40% 黑色淡入，弹窗从中心 0.92 缩放到 1 并淡入，共 300ms，先快后慢；关闭时反向 220ms。 【HTML/CSS/JS 版】[弹窗] 用 .open 类：遮罩 opacity 0→1（300ms），弹窗 transform: scale(0.92)→1 + opacity 0→1（300ms ease-out）；关闭 220ms 反向。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：弹窗动效=随便动一下；遮罩与弹窗不同步会“散”
- ▸弹窗用滑入会与抽屉语义混淆
🚫什么时候别用
- ✗系统级 alert/confirm（无法定制时不做假动效）
🧩常见变体
放大淡入弹簧入场从触发器定位放大
💡小贴士
- ✦关闭比打开快 20-30%，弹窗才干脆
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗