列表增删不再跳帧：Motion 中进退场与位置重排的分层实现列表增删不再跳帧：Motion 中进退场与位置重排的分层实现

1import { AnimatePresence, motion } from "motion/react";
2
3type Item = {
4  id: string;
5  title: string;
6};
7
8export function SimpleReorderList({ items }: { items: Item[] }) {
9  return (
10    <ul className="space-y-2">
11      <AnimatePresence mode="popLayout" initial={false}>
12        {items.map((item) => (
13          <motion.li
14            key={item.id}
15            layout="position"
16            initial={{ opacity: 0, scale: 0.96 }}
17            animate={{ opacity: 1, scale: 1 }}
18            exit={{ opacity: 0, scale: 0.96 }}
19            transition={{
20              layout: { type: "spring", duration: 0.28, bounce: 0 },
21              opacity: { duration: 0.14 },
22              scale: { duration: 0.14 },
23            }}
24          >
25            {item.title}
26          </motion.li>
27        ))}
28      </AnimatePresence>
29    </ul>
30  );
31}

1import { forwardRef } from "react";
2import { motion } from "motion/react";
3
4export const ReorderItem = forwardRef<HTMLLIElement, { title: string }>(
5  function ReorderItem({ title }, ref) {
6    return (
7      <motion.li ref={ref} layout="position">
8        {title}
9      </motion.li>
10    );
11  },
12);

1type ItemRect = {
2  left: number;
3  top: number;
4  width: number;
5  height: number;
6};
7
8function captureRects(items: Item[], itemRefs: Map<string, HTMLDivElement>) {
9  return new Map(
10    items.flatMap((item) => {
11      const node = itemRefs.get(item.id);
12      if (!node) return [];
13
14      return [
15        [
16          item.id,
17          {
18            left: node.offsetLeft,
19            top: node.offsetTop,
20            width: node.offsetWidth,
21            height: node.offsetHeight,
22          },
23        ] as const,
24      ];
25    }),
26  );
27}

1useLayoutEffect(() => {
2  const nextIds = new Set(items.map((item) => item.id));
3  const previousIds = new Set(previousItemsRef.current.map((item) => item.id));
4
5  const addedItems = items.filter((item) => !previousIds.has(item.id));
6  const removedItems = previousItemsRef.current.filter(
7    (item) => !nextIds.has(item.id),
8  );
9
10  setEnteringIds((current) => {
11    const next = new Set([...current].filter((id) => nextIds.has(id)));
12    addedItems.forEach((item) => next.add(item.id));
13    return next;
14  });
15
16  if (removedItems.length > 0) {
17    batchRef.current += 1;
18
19    const snapshots = removedItems.flatMap((item) => {
20      const rect = previousRectsRef.current.get(item.id);
21      if (!rect) return [];
22
23      return [
24        {
25          snapshotId: `${batchRef.current}-${item.id}`,
26          item,
27          ...rect,
28        },
29      ];
30    });
31
32    setExitingSnapshots((current) => [...current, ...snapshots]);
33  }
34
35  previousItemsRef.current = items;
36  previousRectsRef.current = captureRects(items, itemRefs.current);
37}, [items]);

1function scheduleAfterPaint(callback: () => void) {
2  let secondFrame = 0;
3
4  const firstFrame = window.requestAnimationFrame(() => {
5    secondFrame = window.requestAnimationFrame(callback);
6  });
7
8  return () => {
9    window.cancelAnimationFrame(firstFrame);
10    if (secondFrame) window.cancelAnimationFrame(secondFrame);
11  };
12}

1import { motion, useAnimationControls, useReducedMotion } from "motion/react";
2import { useLayoutEffect, type ReactNode } from "react";
3
4const ENTER_SCALE = 0.6;
5
6function EnteringVisual({
7  active,
8  children,
9}: {
10  active: boolean;
11  children: ReactNode;
12}) {
13  const controls = useAnimationControls();
14  const reducedMotion = useReducedMotion();
15
16  useLayoutEffect(() => {
17    if (!active || reducedMotion) {
18      controls.set({ opacity: 1, scale: 1 });
19      return;
20    }
21
22    controls.set({ opacity: 0, scale: ENTER_SCALE });
23
24    return scheduleAfterPaint(() => {
25      void controls.start({
26        opacity: 1,
27        scale: 1,
28        transition: {
29          duration: 0.14,
30          ease: [0.23, 1, 0.32, 1],
31        },
32      });
33    });
34  }, [active, controls, reducedMotion]);
35
36  return (
37    <motion.div
38      initial={false}
39      animate={controls}
40      style={{
41        opacity: active ? 0 : 1,
42        scale: active ? ENTER_SCALE : 1,
43      }}
44      className="origin-center"
45    >
46      {children}
47    </motion.div>
48  );
49}

1function ExitingSnapshot({ snapshot, onExited }: Props) {
2  const controls = useAnimationControls();
3
4  useLayoutEffect(() => {
5    controls.set({ opacity: 1, scale: 1 });
6    let cancelled = false;
7
8    const cancelFrames = scheduleAfterPaint(() => {
9      void controls
10        .start({
11          opacity: 0,
12          scale: 0.6,
13          transition: {
14            duration: 0.12,
15            ease: [0.4, 0, 1, 1],
16          },
17        })
18        .then(() => {
19          if (!cancelled) onExited(snapshot.snapshotId);
20        });
21    });
22
23    return () => {
24      cancelled = true;
25      cancelFrames();
26    };
27  }, [controls, onExited, snapshot.snapshotId]);
28
29  return (
30    <motion.div
31      aria-hidden="true"
32      className="pointer-events-none absolute z-20 origin-center"
33      style={snapshot.rect}
34      initial={false}
35      animate={controls}
36    >
37      <TagVisual item={snapshot.item} />
38    </motion.div>
39  );
40}