Анимация в React: исчезновение, раскладка и Motion

Появление уведомления CSS умеет: у нового элемента нет «было», и его задаёт @starting-style. С исчезновением иначе. Переход рисует путь между двумя состояниями элемента, который остаётся на странице, а в таблице «Где CSS кончается» строка «исчезновение при удалении» так и помечена: убранный элемент пропадает сразу, анимировать нечего. У React на это своя причина. Разницу между старым и новым описанием вносит в DOM коммит, одним заходом: нет тоста в описании — после коммита нет и узла.

Может, поймать узел на выходе? Ниже у тоста две уборки — useLayoutEffect и useEffect, — и обе спрашивают, на странице ли узел. Переход по opacity в стиле тоже есть. «Закрыть» нажимается через 50 мс, через 100 мс пример считает тосты. Предскажите три строки.

function Toast() {
  const box = React.useRef<HTMLParagraphElement>(null);

  React.useLayoutEffect(() => {
    const node = box.current;
    return () => console.log("уборка useLayoutEffect: узел на странице —", node?.isConnected);
  }, []);

  React.useEffect(() => {
    const node = box.current;
    return () => console.log("уборка useEffect: узел на странице —", node?.isConnected);
  }, []);

  return <p ref={box} className="toast">Сохранено</p>;
}

function App() {
  const [open, setOpen] = React.useState(true);
  return (
    <div>
      <style>{".toast { transition: opacity 300ms; }"}</style>
      <button id="close" onClick={() => setOpen(false)}>закрыть</button>
      {open && <Toast />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("close")!.click(), 50);
setTimeout(() => console.log("тостов на странице:", document.querySelectorAll(".toast").length), 100);

Уборка layout-эффекта застала узел на странице, уборка обычного эффекта — уже нет, а через 100 мс тостов ноль. Переход из стиля ничего не дал: opacity никто не менял, узел просто исчез. Порядок уборок и снятия — то, что показывает пример на React 19.2.3 песочницы, а не обещание документации. Важнее другое: отложить снятие не может ни одна уборка. Коммит выполняется целиком, и кадра, где тост был бы «уже уходящим», браузер не нарисует.

function Toast() {
  const box = React.useRef<HTMLParagraphElement>(null);

  React.useLayoutEffect(() => {
    const node = box.current;
    return () => {
      if (!node) return;
      // последняя надежда: запустить переход, пока узел ещё на странице
      const before = getComputedStyle(node).opacity;
      node.style.opacity = "0";
      console.log("уборка: opacity", before, "— переходов", node.getAnimations().length);
      setTimeout(() => {
        console.log("через 100 мс: на странице", node.isConnected, "— переходов", node.getAnimations().length);
      }, 100);
    };
  }, []);

  return <p ref={box} className="toast">Сохранено</p>;
}

function App() {
  const [open, setOpen] = React.useState(true);
  return (
    <div>
      <style>{".toast { transition: opacity 300ms; }"}</style>
      <button id="close" onClick={() => setOpen(false)}>закрыть</button>
      {open && <Toast />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("close")!.click(), 50);

Вывод раздела: «показан» и «есть в DOM» — два разных факта. Чтобы уход был виден, узел должен оставаться в описании, пока анимация не кончится. Дальше — два способа устроить это руками и библиотека, которая делает это за вас.

CSS в примерах записан строкой в теге style прямо в JSX, чтобы стили были видны рядом с кодом. В проекте они живут в CSS-модуле.

Первый способ — не менять состояние, пока анимация не доиграла. Анимацию можно запустить из JavaScript: у каждого элемента есть метод animate(кадры, настройки) из Web Animations API. Кадры — массив объектов со стилями, настройки — длительность и прочее, как у animation в CSS. Метод возвращает объект Animation: у него есть состояние playState и обещание finished, которое выполнится, когда анимация доиграет. Это Baseline widely с 16.03.2023. В JSX анимации нет, поэтому трогать её через ref законно — по правилу через ref трогают то, чего React не описывает. Обработчик «закрыть» запускает анимацию, ждёт finished и только потом зовёт сеттер. Предскажите порядок четырёх строк.

function App() {
  const [open, setOpen] = React.useState(true);
  const toast = React.useRef<HTMLParagraphElement>(null);

  React.useEffect(() => {
    console.log("коммит: open =", open, "— тостов", document.querySelectorAll(".toast").length);
  }, [open]);

  const close = async () => {
    const node = toast.current;
    if (!node) return;
    const fade = node.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: "forwards" });
    console.log("клик: анимация", fade.playState);
    await fade.finished;
    console.log("finished: на странице —", node.isConnected, "opacity", getComputedStyle(node).opacity);
    setOpen(false);
  };

  return (
    <div>
      <button id="close" onClick={close}>закрыть</button>
      {open && <p ref={toast} className="toast">Сохранено</p>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("close")!.click(), 50);

Клик застаёт анимацию в состоянии running, и обработчик ждёт. Когда finished выполнилось, узел ещё на странице и уже прозрачен: fill: "forwards" держит последний кадр, как forwards у animation. Только после этого setOpen(false) заказывает коммит, и тот снимает невидимый узел — исчезновение получилось.

function App() {
  const [open, setOpen] = React.useState(true);
  const toast = React.useRef<HTMLParagraphElement>(null);

  React.useEffect(() => {
    console.log("коммит: open =", open, "— тостов", document.querySelectorAll(".toast").length);
  }, [open]);

  const close = async () => {
    const node = toast.current;
    if (!node) return;
    const fade = node.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200 });
    console.log("клик: анимация", fade.playState);
    await fade.finished;
    console.log("finished: на странице —", node.isConnected, "opacity", getComputedStyle(node).opacity);
    setOpen(false);
  };

  return (
    <div>
      <button id="close" onClick={close}>закрыть</button>
      {open && <p ref={toast} className="toast">Сохранено</p>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("close")!.click(), 50);

Граница способа — там, где удаление начинаете не вы. Способ работает, пока тост закрывает ваш обработчик, который может подождать. Строку убрал filter после ответа сервера, пришли новые данные, сменилась страница — ждать некому: состояние уже новое, и ближайший коммит снимет узел.

Второй способ: уход — это состояние. Вместо флага open — фаза из трёх значений, объединение литералов "shown" | "leaving" | "gone". Клик ставит leaving: абзац остаётся в разметке и только получает класс, а у класса — @keyframes. Событие animationend браузер присылает, когда CSS-анимация доиграла; в JSX это onAnimationEnd, и оно ставит gone — только тогда условие убирает абзац. Эффект печатает фазу и число тостов после каждого коммита. Предскажите вторую строку.

type Phase = "shown" | "leaving" | "gone";

const css = `
  .leaving { animation: fade-out 200ms linear forwards; }
  @keyframes fade-out { to { opacity: 0; } }
`;

function App() {
  const [phase, setPhase] = React.useState<Phase>("shown");

  React.useEffect(() => {
    console.log("коммит:", phase, "— тостов", document.querySelectorAll(".toast").length);
  }, [phase]);

  return (
    <div>
      <style>{css}</style>
      <button id="close" onClick={() => setPhase("leaving")}>закрыть</button>
      {phase !== "gone" && (
        <p
          className={phase === "leaving" ? "toast leaving" : "toast"}
          onAnimationEnd={(e) => {
            console.log("animationend:", e.animationName);
            setPhase("gone");
          }}
        >
          Сохранено
        </p>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("close")!.click(), 50);

Главная строка — «leaving — тостов 1»: тост уходит, но в DOM он есть, и анимации есть что играть. «Показан» и «есть в DOM» снова разошлись, только теперь по нашей воле: между ними лежит фаза, которую держит состояние, а не надежда на уборку. animationend пришло с именем fade-out, и фаза стала gone.

Строки о конце анимации приходят, только когда рамка примера видна: за краем экрана браузер не рисует её кадры, и анимация стоит. Нет строки animationend — прокрутите к рамке, и строки догонят.

У фазы есть ловушка. Добавим в тост значок ✓ с собственной анимацией появления на 100 мс — и больше ничего: даже клика в примере нет. Что напечатает пример?

type Phase = "shown" | "leaving" | "gone";

const css = `
  .leaving { animation: fade-out 200ms linear forwards; }
  .icon { display: inline-block; animation: pop 100ms; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes pop { from { scale: 0; } }
`;

function App() {
  const [phase, setPhase] = React.useState<Phase>("shown");

  React.useEffect(() => {
    console.log("коммит:", phase, "— тостов", document.querySelectorAll(".toast").length);
  }, [phase]);

  return (
    <div>
      <style>{css}</style>
      <button id="close" onClick={() => setPhase("leaving")}>закрыть</button>
      {phase !== "gone" && (
        <p
          className={phase === "leaving" ? "toast leaving" : "toast"}
          onAnimationEnd={(e) => {
            console.log("animationend:", e.animationName);
            setPhase("gone");
          }}
        >
          <span className="icon">✓</span> Сохранено
        </p>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Тост исчез сам, через 100 мс после появления. animationend всплывает, как click: значок доиграл pop, событие поднялось к абзацу, и обработчик абзаца принял чужой конец анимации за свой. Разбор из статьи про всплытие в React работает и здесь: target — где событие случилось, currentTarget — чей обработчик сейчас работает. Как отсеять чужие события — задача 2.

Граница второго способа: фазу держит родитель, и он должен знать, что элемент уходит. У списка это фаза у каждой строки — такой список ждёт в задаче 1, и в нём своя ловушка. А удаление по любой причине — строку убрал filter, пришли новые данные — требует сравнивать детей с прошлой отрисовкой: кто был и пропал, того вернуть в разметку до конца анимации. Писать это для каждого списка руками незачем — это и делает AnimatePresence.

Библиотека называется Motion, раньше — Framer Motion. Оба имени встретятся в чужом коде, а ставят сегодня пакет motion и импортируют из motion/react. В песочнице учебника Motion нет, поэтому дальше — листинги: файлы проекта с импортами вверху, проверенные в браузере, с записанным выводом. Записи сняты на motion 14.0.0 — подпись под каждой. Первый — тост из прошлого раздела.

// toast/toast.tsx
import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";

export function Toast() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>{open ? "закрыть" : "показать"}</button>
      <AnimatePresence onExitComplete={() => console.log("тост ушёл")}>
        {open && (
          <motion.p
            key="toast"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            Сохранено
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  );
}

Сравните с фазой: исчезли тип Phase, onAnimationEnd и ловушка с чужим animationend. Остались exit — как уходить, прямо на элементе, — и key. После «закрыть» абзац ещё около 200 мс в разметке, его opacity падает до нуля, потом узел снимается, и onExitComplete печатает строку один раз.

Внутри, в версии 14.0.0, AnimatePresence сравнивает ключи своих детей с прошлой отрисовкой. Пропавшего ребёнка он оставляет в разметке и сообщает ему, что тот больше не присутствует. motion-элемент запускает exit, а когда доиграют все уходящие, AnimatePresence снимает их разом и зовёт onExitComplete. Кто из детей остался в разметке, компонент хранит в своём состоянии, а отметку «этот ребёнок доиграл» проставляет в layout-эффекте — в исходнике 14.0.0 это прямо объяснено ценой конкурентных обновлений. Отсюда требование key: по ключу ребёнка узнают среди новых детей, как по карте из старых детей в сверке; что ещё значит ключ, покажет статья про ключ как команду «начни заново». Сами авторы в описании exit объясняют, зачем компонент нужен: React не даёт компоненту отложить своё снятие до конца анимации.

Теперь удаление по любой причине. «Убрать выполненные» — обычный filter в обработчике: без фазы у строк и без ожидания. Проп layout на строках двигает соседей; как он устроен, разберём после FLIP.

// tasks/tasks.tsx
import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";

const START = [
  { id: 1, text: "хлеб", done: false },
  { id: 2, text: "молоко", done: true },
  { id: 3, text: "сыр", done: false },
  { id: 4, text: "чай", done: true },
];

export function Tasks() {
  const [tasks, setTasks] = useState(START);

  return (
    <div>
      <button onClick={() => setTasks(tasks.filter((t) => !t.done))}>убрать выполненные</button>
      <ul>
        <AnimatePresence onExitComplete={() => console.log("все ушли")}>
          {tasks.map((t) => (
            <motion.li key={t.id} layout exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
              {t.text}
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
    </div>
  );
}

«Молоко» и «чай» гаснут 200 мс, и только когда их сняли, «сыр» едет на освободившееся место. Так ведёт себя режим по умолчанию, mode="sync": уходящие занимают место, пока не исчезнут. С <AnimatePresence mode="popLayout"> уходящих вынимают из потока сразу — в замере они с первого кадра стоят на прежних местах с position: absolute, и «сыр» едет одновременно с исчезновением. Третий режим, "wait", по описанию в типах держит на экране одного ребёнка за раз: новый входит, когда старый ушёл. onExitComplete в обоих запусках сработал один раз на всех ушедших.

Если уходить должна не анимация exit, а ваша собственная — например, element.animate из первого способа, — у AnimatePresence есть хук usePresence. Первый элемент его ответа, isPresent, — true, пока ребёнок на месте, и false, когда он пропал. Тогда вторым приходит функция safeToRemove, и AnimatePresence держит ребёнка в разметке, пока вы её не вызовете.

В таблице «Где CSS кончается» за исчезновением идёт перестройка раскладки: соседа удалили или переставили — остальные прыгают на новые места, а не едут к ним. Переходу здесь нечего делать: позицию в потоке меняет не свойство, а сама раскладка. Прыжок превращают в движение приёмом FLIP — по первым буквам четырёх шагов. First — где строка была. Last — где она теперь. Invert — сдвиг transform: translateY(first − last), который возвращает её на старое место. Play — анимация этого сдвига до нуля.

First — позиции прошлого коммита: их хранит Map в ref, потому что на разметку они не влияют. Last мерят после коммита, а Invert должен успеть раньше, чем браузер покажет новую раскладку. Поэтому всё происходит в useLayoutEffect, который выполняется до того, как браузер нарисует кадр; с useEffect браузер вправе сначала показать строки на новых местах. Высота строки задана — 30px, позиции считаются от верха списка. Предскажите три строки «было, стало, сдвиг» после «сыр наверх».

const css = `
  ul { list-style: none; margin: 0; padding: 0; }
  li { height: 30px; line-height: 30px; padding: 0 8px; }
`;

function List() {
  const [items, setItems] = React.useState(["хлеб", "молоко", "сыр"]);
  const list = React.useRef<HTMLUListElement>(null);
  // позиции прошлого коммита: для следующего это и есть First
  const tops = React.useRef(new Map<string, number>());

  React.useLayoutEffect(() => {
    if (!list.current) return;
    const listTop = list.current.getBoundingClientRect().top;
    list.current.querySelectorAll("li").forEach((li) => {
      const name = li.textContent ?? "";
      const first = tops.current.get(name);
      const last = li.getBoundingClientRect().top - listTop;
      tops.current.set(name, last);
      if (first === undefined || first === last) return;
      const dy = first - last;
      console.log(`${name}: было ${first}, стало ${last}, сдвиг ${dy}`);
      li.animate([{ transform: `translateY(${dy}px)` }, { transform: "none" }], { duration: 300 });
    });
  }, [items]);

  return (
    <div>
      <style>{css}</style>
      <button id="up" onClick={() => setItems([items[2], items[0], items[1]])}>сыр наверх</button>
      <ul ref={list}>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);
setTimeout(() => document.getElementById("up")!.click(), 50);

Сыр был на 60 и стал на 0: translateY(60px) ставит его туда, где он был, и анимация увозит сдвиг к нулю. Хлеб и молоко опустились на строку, у них сдвиг −30. Порядок строк в выводе — порядок в разметке после коммита, где сыр уже первый; first === last пропускает строки, которые не сдвинулись.

Миниатюра узнаёт строку по тексту: здесь он совпадает с ключом. В настоящем списке узлы строк собирают в Map по ключу ref-функцией с уборкой, как в задаче про прокрутку к выбранной строке из статьи про ref.

const css = `
  ul { list-style: none; margin: 0; padding: 0; }
  li { height: 30px; line-height: 30px; padding: 0 8px; }
`;

function List() {
  const [items, setItems] = React.useState(["хлеб", "молоко", "сыр"]);
  const list = React.useRef<HTMLUListElement>(null);
  const tops = React.useRef(new Map<string, number>());

  React.useLayoutEffect(() => {
    if (!list.current) return;
    const listTop = list.current.getBoundingClientRect().top;
    list.current.querySelectorAll("li").forEach((li) => {
      const name = li.textContent ?? "";
      const first = tops.current.get(name);
      const last = li.getBoundingClientRect().top - listTop;
      tops.current.set(name, last);
      if (first === undefined || first === last) return;
      const move = li.animate(
        [{ transform: `translateY(${first - last}px)` }, { transform: "none" }],
        { duration: 300, easing: "linear" },
      );
      // стоп-кадр: время ставим сами, а не ждём кадров
      move.pause();
      move.currentTime = 0;
      const start = li.getBoundingClientRect().top - listTop;
      move.currentTime = 150;
      const middle = li.getBoundingClientRect().top - listTop;
      move.play();
      console.log(`${name}: на экране в начале ${start}, на середине ${middle}, в разметке ${last}`);
    });
  }, [items]);

  return (
    <div>
      <style>{css}</style>
      <button id="up" onClick={() => setItems([items[2], items[0], items[1]])}>сыр наверх</button>
      <ul ref={list}>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);
setTimeout(() => document.getElementById("up")!.click(), 50);

Где миниатюра кончается: нажмём «сыр вниз», пока строки ещё едут. Пример ставит все анимации первой перестановки на середину пути, печатает, где виден сыр, и кликает. Предскажите остальные строки — что второй коммит примет за «было» и «стало».

const css = `
  ul { list-style: none; margin: 0; padding: 0; }
  li { height: 30px; line-height: 30px; padding: 0 8px; }
`;

function List() {
  const [items, setItems] = React.useState(["хлеб", "молоко", "сыр"]);
  const list = React.useRef<HTMLUListElement>(null);
  const tops = React.useRef(new Map<string, number>());

  React.useLayoutEffect(() => {
    if (!list.current) return;
    const listTop = list.current.getBoundingClientRect().top;
    list.current.querySelectorAll("li").forEach((li) => {
      const name = li.textContent ?? "";
      const first = tops.current.get(name);
      const last = li.getBoundingClientRect().top - listTop;
      tops.current.set(name, last);
      if (first === undefined || first === last) return;
      console.log(`${name}: было ${first}, стало ${last}`);
      li.animate([{ transform: `translateY(${first - last}px)` }, { transform: "none" }], { duration: 300, easing: "linear" });
    });
  }, [items]);

  return (
    <div>
      <style>{css}</style>
      <button id="up" onClick={() => setItems(["сыр", "хлеб", "молоко"])}>сыр наверх</button>
      <button id="down" onClick={() => setItems(["хлеб", "молоко", "сыр"])}>сыр вниз</button>
      <ul ref={list}>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);
setTimeout(() => document.getElementById("up")!.click(), 50);
setTimeout(() => {
  // стоп-кадр на середине первой перестановки — второй клик застанет строки в пути
  document.getAnimations().forEach((move) => {
    move.pause();
    move.currentTime = 150;
  });
  const ul = document.querySelector("ul")!;
  const cheese = Array.from(ul.querySelectorAll("li")).find((li) => li.textContent === "сыр")!;
  console.log("сыр на экране:", cheese.getBoundingClientRect().top - ul.getBoundingClientRect().top);
  document.getElementById("down")!.click();
}, 100);

Во втором коммите «стало» у сыра — 90, хотя в раскладке он на 60: замер захватил transform остановленной анимации. А «было» — 0, чистая позиция прошлого коммита, хотя глаз видел сыр на 30. Сдвиг 0 − 90 уводит строку на −30, за верхний край списка, и только оттуда она едет вниз. В живом времени, без стоп-кадра, это скачок больше чем на 60 px за один кадр (Chrome 152 и 154). Правильное «было» — там, где строку видно прямо перед коммитом.

Хук здесь не виноват. В useLayoutEffect недоигранная анимация ещё висит на строке, и её сдвиг можно измерить — так миниатюру чинит задача 3. Но каждая такая поправка — ещё один случай, который держите в голове вы: меняется размер, внутри строки свои элементы, строка переезжает в другой список. Эти случаи и берёт на себя библиотека.

Тот же «сыр наверх» в Motion — один проп layout вместо Map, замеров и animate.

// shelf/shelf.tsx
import { useState } from "react";
import { motion } from "motion/react";

export function Shelf() {
  const [items, setItems] = useState(["хлеб", "молоко", "сыр"]);

  return (
    <div>
      <button onClick={() => setItems([items[2], items[0], items[1]])}>сыр наверх</button>
      <ul>
        {items.map((item) => (
          <motion.li
            key={item}
            layout
            transition={{ duration: 0.3 }}
            onLayoutAnimationComplete={() => console.log("доехал:", item)}
          >
            {item}
          </motion.li>
        ))}
      </ul>
    </div>
  );
}

Порядок узлов в DOM меняется сразу, а на экране строки около 300 мс едут через transform — это тот же FLIP. Разница в месте замера. В версии 14.0.0 каждый motion-элемент с layout мерит себя в самом начале коммита, прямо перед тем как React правит DOM, и ещё раз после, поэтому хранить прошлые позиции самому не нужно. Прерывание из прошлого раздела в живом времени — «сыр вниз» через 150 мс после «сыр наверх», те же 300 мс и linear — Motion разворачивает с того места, где строку видно: в замере (13.2.0, Chrome 152) строка сдвигается за кадр не больше чем на 4 px, то есть просто едет, как у миниатюры, исправленной в задаче 3.

Сверх миниатюры, по описанию в типах: layout анимирует не только позицию, но и размер — через scale, и от этого искажаются дети, border-radius и box-shadow. Прямым детям ставят layout тоже, а скругление и тень библиотека поправит, если они заданы через её пропсы, например initial. layoutId связывает два разных элемента в одно движение: подчёркивание, которое переезжает с вкладки на вкладку, — это два элемента с одинаковым layoutId. Эти возможности здесь не запускались.

Любое движение на экране кому-то мешает. Настройка «уменьшить движение» и медиазапрос prefers-reduced-motion разобраны в прологе, а из JavaScript её читает matchMedia. В Motion 14.0.0 по умолчанию reducedMotion: "never": настройку человека библиотека не слушает, и полка из листинга выше при включённой настройке едет как обычно. Попросить её слушать можно обёрткой:

// shelf-page/shelf-page.tsx
import { MotionConfig } from "motion/react";
import { Shelf } from "../shelf/shelf";

export function ShelfPage() {
  return (
    <MotionConfig reducedMotion="user">
      <Shelf />
    </MotionConfig>
  );
}

С reducedMotion="user" и включённой настройкой строки встают на места мгновенно, а onLayoutAnimationComplete всё равно приходит — три «доехал» в консоли есть. Без настройки полка едет, как раньше. Есть и хук useReducedMotion: он возвращает саму настройку — для случаев, когда движение нужно не выключить, а заменить, например сдвиг проявлением.

В Next.js App Router Toast, Tasks и Shelf из листингов этой статьи — клиентские компоненты, с "use client" первой строкой: у них состояние и обработчики, да и сама библиотека построена на хуках и эффектах — это строка «библиотека, внутри которой всё это есть» в таблице границы. Серверную страницу с motion-элементом из motion/react next 16.4.0 не отрисует («createMotionComponent is on the client»); для анимированного элемента без состояния в серверной странице у пакета есть вход motion/react-client.

У браузера есть и свой механизм: document.startViewTransition запоминает вид страницы до обновления и анимирует переход к новому. Это Baseline newly с 14.10.2025, а переходы между страницами через @view-transition пока limited — в Firefox их нет. React 19.3.0, вышедший 09.09.2026, добавил поверх него компонент ViewTransition; по описанию в типах он срабатывает только на несрочных обновлениях — например, тех, что помечает startTransition. В песочнице React 19.2.3, поэтому здесь это то, о чём стоит знать, а не на что опираться.

Motion — библиотека для react-dom: он указан в её peerDependencies, а в React Native движение устроено иначе. В части V его соберут заново — из значения, подписки и кадра, потом пружиной без длительности в Animated, и дойдут до жестов: касания, сдвига и свайпа.