Словами самого skill
Руководство по анимации между состояниями UI с помощью React View Transition API: объявляйте что с помощью компонента ViewTransition, запускайте когда через startTransition, useDeferredValue или Suspense, и управляйте как с помощью CSS-классов. Оно охватывает пять паттернов в фиксированном порядке приоритета: морфинг общих элементов, идентичность списка, изменение состояния и изменение маршрута, а также навигацию с направлением по типу через addTransitionType и интеграцию с Next.js App Router.
Оно объясняет, где должна располагаться граница ViewTransition, когда требуется default="none", какие браузеры это поддерживают (Chromium 125+, Firefox 144+, Safari 18.2+) с плавной деградацией в остальных случаях, и указывает на справочные файлы с порядком реализации, CSS-рецептами, паттернами и устранением неполадок.
Что он выдаёт
- Переиспользуемый компонент-обёртка с направлением, который хранит карты входа и выхода с ключами по типу для многостраничных приложений.
- Морфинг общих элементов, создаваемый повторным использованием одного имени на размонтируемом и монтируемом представлениях, например миниатюра, которая превращается в главное изображение.
- CSS-правила, привязанные к псевдоэлементам view transition, включая пару изображений, хранящую оба снимка.
- Реализация с плавной деградацией, при которой неподдерживающие браузеры пропускают анимацию, а не ломают навигацию.
Как это работает
- 01Определите, что говорит анимация
Добавляйте границу только тогда, когда вы можете сформулировать, какую пространственную связь или непрерывность она выражает. Если вы не можете сказать, что она передаёт, не добавляйте её.
- 02Оберните состояние в границу
React назначает уникальное view-transition-name и вызывает document.startViewTransition под капотом, поэтому вы никогда не вызываете startViewTransition сами.
- 03Запускайте её через Transition
Enter, exit, update и share срабатывают только из startTransition, useDeferredValue или Suspense. Обычный setState ничего не анимирует.
- 04Стилизуйте снимки в CSS
Исходящий и входящий снимки выбираются через псевдоэлементы view transition с собственными именами классов, а файл с рецептами предоставляет готовые анимации.
- 05Помечайте её типами transition
addTransitionType складывает контекстные типы, чтобы разные границы в дереве реагировали по-разному, а объект для каждого типа связывает эти типы с CSS-классами на enter, exit и share.