Component & Layout

FLIP Layout Animation (FLIP布局动画)

别称 Layout animation, First-Last-Invert-Play

布局变化后,元素平滑地移动到新的位置和尺寸。

筛选网格、重新排列的列表

  • reorder
  • grid to list
  • auto-layout resize

查看演示源码

提示词

将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。

在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation),也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时,每个元素从旧位置平滑移动到新位置,而不是直接跳过去:开始时快,最后轻柔地落定。
只用 transform 做动画,避免页面每一帧都重新排版;如果用户开启了“减少动态效果”(prefers-reduced-motion),直接切换到新布局。

将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。