✏️ AI 术语图鉴

标签页切换 · Tab Transition

英文：Tab Transition

动效与交互难度：入门 ★

🗣️一句话大白话

标签页内容切换时的过渡：淡入淡出、左右滑移、指示条滑动。切换“顺滑感”的关键。标签切换动效：内容区 fade + 轻微位移（新内容从右或下方进入），指示条平滑滑到新位置。告诉 AI“切换时新内容淡入+从右 12px 进入，200ms；指示条滑动”即可。要点：切换动效别超过 250ms（标签切换要快），否则有“滞后感”；指示条滑动是“Tab 质感”的点睛。

🎬真实场景

设置页、分类导航、产品规格切换、报告分栏

📮你可以这样说

「【图像模型版】[标签页] 切换时：新内容淡入+从右 12px 进入，旧内容淡出，共 200ms；底部指示条平滑滑动到新标签位置。 【HTML/CSS/JS 版】[Tab 面板] 切换 class 触发 opacity 0→1 + translateX(12px)→0，200ms ease-out；[指示条] 用 left 过渡 200ms 跟随。」

通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。

⚠️边界与常见误解

  • ▸误解：标签切换=整页跳转；实际是内容区局部过渡
  • ▸切换超过 300ms 会显得迟钝

🚫什么时候别用

  • ✗内容很大的面板（性能）、SEO 需要独立 URL 的页面

🧩常见变体

淡入淡出内容滑移指示条滑动内容+指示条组合

💡小贴士

  • ✦200ms 最顺手；指示条滑动比内容动画更能体现质感

🕸️知识关系图

这个词条与相关术语、AI绘图 知识的连接关系

相关术语相关术语相关术语
布局过渡
Layout Animation / FLIP
淡入淡出
Fade
动效时长
Duration
标签页切换
Tab Transition

🔗相关术语

布局过渡Layout Animation / FLIP淡入淡出Fade动效时长Duration

📌素材来源

词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗