·mastering-animate-presence
</>

mastering-animate-presence

Рекомендации по реализации анимации выхода с помощью компонента AnimatePresence компании Motion. Используйте при анимации выхода элементов из DOM, координации вложенных выходов или управлении состоянием присутствия. Запускается при выполнении задач, связанных с анимацией выхода React, отключением переходов или шаблонами библиотеки движений.

140Установки·1Тренд·@raphaelsalaja

Установка

$npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence

Как установить mastering-animate-presence

Быстро установите AI-навык mastering-animate-presence в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: raphaelsalaja/userinterface-wiki.

When elements leave the DOM, they're gone—no way to animate something that doesn't exist. Motion's AnimatePresence solves this by keeping departing elements mounted long enough to animate out.

| AnimatePresence | Wrapper that enables exit animations | | useIsPresent | Hook to read if component is exiting | | usePresence | Hook for manual exit control with safeToRemove | | propagate | Prop to enable nested exit animations | | mode | Controls timing between enter/exit (sync, wait, popLayout) |

Use useIsPresent when a component needs to know it's exiting:

Рекомендации по реализации анимации выхода с помощью компонента AnimatePresence компании Motion. Используйте при анимации выхода элементов из DOM, координации вложенных выходов или управлении состоянием присутствия. Запускается при выполнении задач, связанных с анимацией выхода React, отключением переходов или шаблонами библиотеки движений. Источник: raphaelsalaja/userinterface-wiki.

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence
Категория
</>Разработка
Проверено
Впервые замечено
2026-02-01
Обновлено
2026-03-10

Browse more skills from raphaelsalaja/userinterface-wiki

Короткие ответы

Что такое mastering-animate-presence?

Рекомендации по реализации анимации выхода с помощью компонента AnimatePresence компании Motion. Используйте при анимации выхода элементов из DOM, координации вложенных выходов или управлении состоянием присутствия. Запускается при выполнении задач, связанных с анимацией выхода React, отключением переходов или шаблонами библиотеки движений. Источник: raphaelsalaja/userinterface-wiki.

Как установить mastering-animate-presence?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/raphaelsalaja/userinterface-wiki