.list {
 display: flex;
 flex-wrap: wrap;
 width: 400px;
}
.item {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 80px;
 height: 80px;
 border: 1px solid #eee;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

function ListShuffler() {
 const [data, setData] = useState([0, 1, 2, 3, 4, 5]);
 const listRef = useRef<HTMLDivElement>(null);
 return (
   <div className={styles.list} ref={listRef}>
     {data.map((item) => (
       <div key={item} className={styles.item}>
         {item}
       </div>
     ))}
   </div>
 );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

function createChildElementRectMap(nodes: HTMLElement | null | undefined) {
 if (!nodes) {
   return new Map();
 }
 const elements = Array.from(nodes.childNodes) as HTMLElement[];
 // 使用节点作为 Map 的 key 存储当前快照，下次直接用 node 引用取值，相当方便
 return new Map(elements.map((node) => [node, node.getBoundingClientRect()]));
}
1.
2.
3.
4.
5.
6.
7.
8.

// 使用 ref 存储 DOM 之前的位置信息
const lastRectRef = useRef<Map<HTMLElement, DOMRect>>(new Map());
function handleAdd() {
 // 添加一条到顶部，让后面节点运动
 setData((prev) => [prev.length, ...prev]);
 // 并存储改变前的 DOM 快照
 lastRectRef.current = createChildElementRectMap(listRef.current);
}
1.
2.
3.
4.
5.
6.
7.
8.

useLayoutEffect(() => {
 // 改变后的 DOM 快照，此时 UI 并未更新
 const currentRectMap = createChildElementRectMap(listRef.current);
}, [data]);
1.
2.
3.
4.

// 遍历之前的快照
lastRectRef.current.forEach((prevRect, node) => {
 // 前后快照的 DOM 引用一样，可以直接获取
 const currentRect = currentRectMap.get(node);
 // Invert
 const invert = {
   left: prevRect.left - currentRect.left,
   top: prevRect.top - currentRect.top,
 };
 const keyframes = [
   {
     transform: `translate(${invert.left}px, ${invert.top}px)`,
   },
   { transform: 'translate(0, 0)' },
 ];
 // Play 执行动画
 node.animate(keyframes, {
   duration: 800,
   easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
 });
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

import { shuffle } from 'lodash-es';
function shuffleList() {
 setData(shuffle);
 // 并存储改变前的 DOM 快照
 lastRectRef.current = createChildElementRectMap(listRef.current);
}
1.
2.
3.
4.
5.
6.

useMemo(() => {
 // render 时立即执行
 lastRectRef.current.forEach((item) => {
   item.rect = item.node.getBoundingClientRect();
 });
}, [data]);
1.
2.
3.
4.
5.
6.

export default function Flipper({ flipKey, children }: FlipperProps) {
 const lastRectRef = useRef<Map<number, FlipItemType>>(new Map());
 const uniqueIdRef = useRef(0);
 // 通过 ref 创建函数，传递 context 避免引起穿透渲染
 const fnRef = useRef<IFlipContext>({
   add(flipItem) {
     lastRectRef.current.set(flipItem.flipId, flipItem);
   },
   remove(flipId) {
     lastRectRef.current.delete(flipId);
   },
   nextId() {
     return (uniqueIdRef.current += 1);
   },
 });
 useMemo(() => {
   lastRectRef.current.forEach((item) => {
     item.rect = item.node.getBoundingClientRect();
   });
 }, [flipKey]);
 useLayoutEffect(() => {
   const currentRectMap = new Map<number, DOMRect>();
   lastRectRef.current.forEach((item) => {
     currentRectMap.set(item.flipId, item.node.getBoundingClientRect());
   });
   lastRectRef.current.forEach(() => {
     // 之前的 FLIP 代码
   });
 }, [flipKey]);
 return <FlipContext.Provider value={fnRef}>{children}</FlipContext.Provider>;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

import React, { createContext } from 'react';
export type FlipItemType = {
 // 子组件的唯一标识
 flipId: number;
 // 子组件通过 ref 获取的节点
 node: HTMLElement;
 // 子组件的位置快照
 rect?: DOMRect;
};
export interface IFlipContext {
 // mount 后执行 add
 add: (item: FlipItemType) => void;
 // unout 后执行 remove
 remove: (flipId: number) => void;
 // 自增唯一 id
 nextId: () => number;
}
export const FlipContext = createContext(
 undefined as unknown as React.MutableRefObject<IFlipContext>,
);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

import React, {
 cloneElement,
 memo,
 useContext,
 useLayoutEffect,
 useRef,
} from 'react';
import { FlipContext } from './FlipContext';
export interface FlippedProps {
 children: React.ReactElement;
 innerRef?: React.RefObject<HTMLElement>;
}
function Flipped({ children, innerRef }: FlippedProps) {
 // Flipper.tsx 将 ref 通过 Context 传递，避免穿透渲染
 const ctxRef = useContext(FlipContext);
 const ref = useRef<HTMLElement>(null);
 const currentRef = innerRef || ref;
 useLayoutEffect(() => {
   const ctx = ctxRef.current;
   const node = currentRef.current;
   // 生成唯一 ID
   const flipId = ctx.nextId();
   if (node) {
     // mount 后添加节点
     ctx.add({ flipId, node });
   }
   return () => {
     // unmout 后删除节点
     ctx.remove(flipId);
   };
 }, []);
 return cloneElement(children, { ref: currentRef });
}
export default memo(Flipped);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

<Flipper flipKey={data}>
 <div className={styles.list}>
   {data.map((item) => (
     <Flipped key={item}>
       <div className={styles.item}>{item}</div>
     </Flipped>
   ))}
 </div>
</Flipper>
1.
2.
3.
4.
5.
6.
7.
8.
9.

const isLastRectOverflow =
 rect.right < 0 ||
 rect.left > innerWidth ||
 rect.bottom < 0 ||
 rect.top > innerHeight;
const isCurrentRectOverflow =
 currentRect.right < 0 ||
 currentRect.left > innerWidth ||
 currentRect.bottom < 0 ||
 currentRect.top > innerHeight;
if (isLastRectOverflow && isCurrentRectOverflow) {
 return;
}
// node.animate() ...
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.