页面转场 · Page Transition
英文：Page Transition
动效与交互难度：入门 ★
🗣️一句话大白话
页面切换时的过渡：淡入淡出、水平滑动、翻转。多页应用的“连贯感”，决定 App 是否“顺”。页面转场类型：淡入淡出（通用安全）、水平滑动（App 层级导航）、上滑（上下页关系）、翻转/缩放（品牌趣味）。告诉 AI“页面切换淡入淡出 300ms”即可。要点：转场方向要有语义（前进=从右进、后退=从左出）；时长 300-500ms；SPA 转场优先内容区，别整页闪白。
🎬真实场景
多页站点、App 页面切换、作品集导航、电商流程
📮你可以这样说
「【图像模型版】页面切换用淡入淡出：新页淡入+轻微上移 12px，旧页淡出，共 350ms；前进/后退方向一致。 【HTML/CSS/JS 版】SPA 路由切换时内容区 opacity 0→1 + translateY(12px)→0，350ms ease-out；或用 View Transitions API 做页面级过渡。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：页面转场=整页动画；内容区过渡就够，整页闪白是负优化
- ▸方向语义不一致（前进后退都同一方向）会迷失
🚫什么时候别用
- ✗内容极重的页面（先渲染再动）
- ✗需要秒开的工具页
🧩常见变体
淡入淡出水平滑动上滑翻转
💡小贴士
- ✦300-500ms；前进从右进、后退从左出才符合直觉
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗