列表变化，不必跳一下
通过排序前后对比，持续认出同一个列表项目。
互动实验在真实界面中看
正在准备互动实验…
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
正在准备互动实验…
顺序变化后立即显示新位置。
使用 Skills · 应用交互规则规则应用
正在准备互动实验…
项目从当前位置过渡到新位置。
01 / 改了什么
稳定 ID、真实布局更新与位置差补偿。
02 / 为什么这样改
稳定身份比炫目的位移更重要。
03 / 什么时候不需要
虚拟化长列表、大批更新和用户正在阅读时，需要额外评估。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
稳定身份比炫目的位移更重要。
01每个项目有稳定 ID，不用数组索引冒充身份。
02先更新真实 DOM 顺序，再用旧新位置差做视觉过渡。
03中途重排先读取当前视觉位置，避免跳回上个终点。
适合用在任务排序收藏列表少量项目增删
把这段需求，交给你的 AI
为三项任务列表增加重排过渡。使用稳定 ID；先测当前视觉位置再更新 DOM 顺序，用 transform 让项目到达新位置。连续重排可中断，减少动态效果时直接更新顺序。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
// FLIP 的核心：真实布局先更新，视觉上补偿位置差。
const deltaY = previousTop - nextTop;
element.animate([
{ transform: "translateY(" + deltaY + "px)" },
{ transform: "translateY(0)" }
], { duration: 260, easing: "cubic-bezier(.2,.8,.2,1)" });原理、来源与适用边界 ＋
虚拟化长列表、大批更新和用户正在阅读时，需要额外评估。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。