这个效果是怎么做出来的
列表项换位时浏览器是瞬间把元素画到新坐标的，什么都不做就是生硬跳变，所以要上 FLIP 四步：First 记录旧位置，Last 让 DOM 真正重排，Invert 用 transform 把元素反向搬回旧位，Play 放动画回到零点。直线版 FLIP 工整但机械——真实物体改变运动方向要走弧线。弧线的偷懒做法是把位移拆到两层嵌套元素上：外层只管水平位移，用先快后慢的 easeOut；内层只管垂直位移，用先慢后快的 easeIn。两层时间曲线不同步，X 先走完 Y 才追上，合成轨迹自动是一段弧，全程只写 transform，重排只发生一次，性能毫无压力。demo 点按钮随机打乱八张卡片，每张都沿自己的弧线飞向新位置。
怎么用这条提示词
适合看板拖拽排序、相册网格删除重排、标签云打乱、抽奖池洗牌这类二维重排场景。发给 AI 时说明触发重排的操作是什么（点按钮、拖拽松手还是删除元素），它会套 FLIP 流程。要更自然可以补一句「位移距离远的卡片时长略长」。
想效果更好？试试这些
两段缓动的先后决定弧的凸向：X 用 easeOut、Y 用 easeIn 是先横后纵，反过来的话弧朝另一边凸，配对错了会变成 S 形。单轴重排（纯横向列表）拆不出弧线，这条技巧只对二维网格生效。卡片超过二十张后别全部用同一时长，按位移距离在 0.4 到 0.7 秒间微调，远近有别更像物理世界。还有一点容易漏：重排后要重新读一次位置再播放，直接用缓存旧坐标会飞错方向。