106.9K+Скачать
Перейти к руководству
Transitions.devавтор Jakubantalik

Transitions.dev Навык.

Применяйте CSS-переходы для конкретных компонентов и семантические токены движения.

  • Переходы
  • Веб-анимация
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · transitions-devSKILL.md
Задача Применяйте CSS-переходы для конкретных компонентов и семантические токены движения. Результаты Выбранный рецепт перехода с нужными CSS-переменными. Перед началом Предоставьте разметку, стили и обработку состояния компонента, а также текущие токены движения. Перед адаптацией изучите специальную лицензию для своего применения: у распространения, шаблонов и тем есть условия.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Применяйте CSS-переходы для конкретных компонентов и семантические токены движения

Изучите CSS-переходы для меню, модальных окон, текста и контролов с семантическими токенами, хуками состояния и проверками повторного взаимодействия.

Процесс на основе источникаНе тест выполнения

Принцип работы

transitions-dev предоставляет переносимые CSS-рецепты переходов с пространствами имён селекторов и семантическими переменными движения. Рецепт подбирается под видимый компонент: привязанное к триггеру меню, модальное окно, сменяющийся текст или скользящий индикатор вкладки. Реализация связывает документированные хуки состояния с реальным поведением приложения.

Навык также предлагает маршруты review и refine. Review находит потенциальные применения без редактирования; refine сопоставляет разрозненные значения с токенами по смыслу. Анимация закрытия получает токен длительности закрытия из-за своей цели, а не близости старого числа.

Ожидаемые результаты

  • Выбранный рецепт перехода с нужными CSS-переменными.
  • Документированные хуки классов или атрибутов, подключённые к компоненту.
  • Проверка на уровне файлов либо предложение семантического уточнения токенов.
Смотреть пример задания

От задания до проверки

  1. 01
    Сопоставьте компонент

    Изучите элемент и смену состояния. Отличите привязанное меню от центрированного модального окна, смену текста — от движения страницы.

  2. 02
    Добавьте токены и хуки

    Используйте общий блок переменных один раз либо переменные выбранного рецепта. Сохраните очистку после закрытия, обработку повтора и нужную координацию JavaScript.

  3. 03
    Проверьте повторное поведение

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

02 Когда использовать

Когда использовать

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

Хорошо подходит

  • Компоненту нужен определённый переходРецепты связывают CSS-поведение с узнаваемыми состояниями UI, а не абстрактным запросом анимации.
  • Значения тайминга стали несогласованнымиМаршрут уточнения предлагает семантические токены по действию, которому служит каждая длительность.

Ограничения

  • У библиотеки есть ограничения распространенияСпециальная лицензия навыка разрешает личное использование и коммерческие продукты, но запрещает перепубликовывать коллекцию или существенную часть как конкурирующую библиотеку переходов, motion pack или набор анимации. Для шаблонов и тем есть дополнительные условия; MIT-лицензия инструментов репозитория на этот навык не распространяется.
  • Хуки всё равно нужно интегрироватьФрагмент не обеспечивает автоматически правильное состояние приложения, управление фокусом или поведение окружающего компонента.

Что подготовить

  • Код компонентаПредоставьте соответствующую разметку, стили и реализацию состояния.
  • Замысел взаимодействияУкажите событие открытия, закрытия, смены или обратной связи.
  • Текущая система движенияВключите текущие токены, поведение тем и уже установленный общий блок переменных.

03 Важные решения

Важные решения

  1. Семантическая настройка

    Именованные длительности и расстояния выражают способ движения компонента.

  2. Малый масштаб компонента

    Источник предпочитает целевые правки и избегает подключения общей библиотеки движения.

  3. Повторяемые взаимодействия

    Правила очистки и повторного запуска устраняют сбои, возникающие лишь при втором взаимодействии.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте соответствующую разметку, стили и реализацию состояния.

Исходный файл в репозитории
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй transitions-dev для улучшения выпадающего меню аккаунта в существующем приложении. До выбора рецепта изучи триггер, состояние меню и текущий CSS. Пусть меню раскрывается из триггера; сохрани поведение клавиатуры и фокуса проекта. Используй семантические переменные движения без дублирования имеющегося корневого блока. Проверь быстрое открытие-закрытие-открытие и очистку класса закрытия. Сохрани ветку уменьшения движения и светлую/тёмную темы. Верни целевые изменения и объясни подключённые хуки; не переделывай содержимое меню и посторонние компоненты.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

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

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

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

Владелец источника
Jakubantalik
Репозиторий
Jakubantalik/transitions.dev
Файл навыка
SKILL.md
Лицензия
LicenseRef-Transitions-dev
Проверенный снимок
2026-11-02 · e3aefb554d8f
Редакционное резюме источника
Применяйте CSS-переходы для конкретных компонентов и семантические токены движения.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Нужен JavaScript-фреймворк анимации?

Рецепты используют CSS и при необходимости небольшие фрагменты координации состояния. Общий motion-фреймворк не требуется.

Что меняет refine?

Сначала предлагает замену разрозненных значений движения по семантическому применению. Значения без подходящего по смыслу токена оставляет без изменений.

Почему второе открытие может сломаться?

Источник выделяет оставшиеся классы закрытия и отсутствие reflow для повторного запуска как частые причины. Скриншот первого открытия не покажет эти сбои.

OpenDesign

Храните задание и работу над дизайном вместе.

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md