✏️ AI 术语图鉴

布局过渡 · Layout Animation / FLIP

英文：Layout Animation / FLIP

动效与交互难度：入门 ★

🗣️一句话大白话

增删元素、筛选排序时，其他元素平滑挪位让位（FLIP 技术）。列表增删不“跳变”的关键。布局变化动效：元素位置变化用 FLIP（First-Last-Invert-Play）技术——记录首尾位置、反向补偿、再播放到位，让“挪位”有过渡。告诉 AI“筛选后卡片重排要平滑过渡，用 FLIP”即可。要点：布局动画处理“位置变化”而非“出现消失”；只动 transform/opacity（不触发重排）才不卡。

🖼️样图参考

示例图 · 卡片删除让位三帧
示例图 · 卡片删除让位三帧

🎬真实场景

筛选重排、列表增删、拖拽排序、网格布局变化

📮你可以这样说

「【图像模型版】筛选后卡片重排：位置变化的卡片平滑移动到新位置（300ms，先快后慢），新增/删除的卡片淡入淡出。 【HTML/CSS/JS 版】用 FLIP：记录卡片旧位置 → 重排后算位移 → transform: translate() 反向补偿 → 过渡到 0；或用 View Transitions API。」

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

⚠️边界与常见误解

  • ▸误解：布局动画=元素动画；布局动画是“周围元素让位”的过渡
  • ▸动画触发布局/样式重排（如 top 定位）会卡顿

🚫什么时候别用

  • ✗列表项极多（>50，性能优先）
  • ✗用户正在快速操作时

🧩常见变体

筛选重排增删让位拖拽排序

💡小贴士

  • ✦只动 transform/opacity；列表大时考虑 View Transitions API

🕸️知识关系图

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

相关术语相关术语相关术语
标签页切换
Tab Transition
共享元素转场
Shared Element Transition
弹簧动画
Spring
布局过渡
Layout Animation / FLIP

🔗相关术语

标签页切换Tab Transition共享元素转场Shared Element Transition弹簧动画Spring

📌素材来源

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