Локализованное руководство по чтению

vercel-react-view-transitionsНазначение, использование и источник

Руководство по реализации плавных анимаций, имитирующих нативные интерфейсы, с использованием API переходов между представлениями React ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, startViewTransition, ViewTransition, типы переходов или вопросы об анимации между состояниями пользовательского интерфейса в React без использования сторонних библиотек анимации.

Источник получен: 2026-10-29

Репозиторий-источник: vercel-labs/agent-skills
SKILL.md: skills/react-view-transitions/SKILL.md
Звёзды репозитория: 33,269
Последнее обновление репозитория: 2026-10-29
Категории Skills: Разработка
Время последнего сбора: 2026-10-31 10:38 UTC+08:00

Лицензия: Не указано

Оригинальный файл SKILL.md README на английском

Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.

Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.

Что делает этот навык

Как работает рабочий процесс на вышестоящем уровне

Процесс внедрения

При добавлении эффектов перехода между окнами в существующее приложение следуйте инструкциям.references/implementation.mdшаг за шагом. Начните с аудита — не пропускайте его. Используйтеreferences/css-recipes.mdдля соответствующего CSS и адаптируйте его к приложению.

проход вверх по течению · L51 ↗

Когда анимировать

Каждый символ «» должен передавать пространственную связь или непрерывность. Если вы не можете сформулировать, что он передает, не добавляйте его. Реализуйте все подходящие шаблоны из этого списка в следующем порядке: Это порядок реализации, а не список «выбери один». Реализуйте каждый шаблон, подходящий для приложения. Пропускайте шаблон только в том случае, если приложение не имеет для него практического применения.

проход вверх по течению · L14 ↗

Переходы между представлениями в React

Анимируйте переходы между состояниями пользовательского интерфейса, используя встроенные функции браузера.document.startViewTransition. Объявите *что* с помощью , trigger *when* with начало перехода / useDeferredValue / «Управление анимацией» (suspense) осуществляется с помощью CSS-классов. Неподдерживаемые браузеры корректно пропускают анимацию.

проход вверх по течению · L10 ↗

проход вверх по течению · jsx ↗

import { ViewTransition } from 'react';

<ViewTransition>
  <Component />
</ViewTransition>

Требования и настройка

Из этого файла не был выбран фрагмент с краткими требованиями. Это не означает, что у навыка нет зависимостей. Проверьте инструкции по настройке репозитория и указанные файлы.

Ограничения и проверки качества

Ограничение вложенной желудочковой тахикардии

Когда родитель VTmounts/unmountsПоскольку это единый блок с вложенными внутри него виртуальными модулями, вложенные модули не запускают свои собственные.enter/exit— Анимируется только самый внешний VT. (Дочерний VT, установленный внутри *постоянно работающего* родительского VT, срабатывает)enter/exit(Обычно.) Пошаговая анимация для каждого элемента во время навигации по странице в настоящее время недоступна.Next.js; информацию о состоянии экспериментальной части см. в разделе устранения неполадок.

проход вверх по течению · L304 ↗

Начните с безопасного пробного периода.

Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.

Формат навыков и спецификация каталога ↗

Подробнее читайте в источнике.

Перевод и сфера применения

В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.

Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.

Закрепленный источник: Прочитайте оригинал ↗
Источник получен: 2026-10-29T09:32:23Z
Исходный коммит: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
Исходный SHA-256: 693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a

Вернуться к полному каталогу навыков