Анимации появления и исчезновения без библиотеки

Когда Вы условно отрисовываете элемент с помощью {show && }, React удаляет его из DOM сразу после того, как show становится равным false. Времени на анимацию выхода не остаётся, потому что узел уже удалён.

Анимации появления просты, а анимации выхода — настоящая проблема.

Самое простое решение — никогда не размонтировать элемент. Оставьте его отрисованным, при скрытии анимируйте opacity до нуля и задайте pointer-events: none, а при показе верните прозрачность к единице.

Так Вы получите плавное исчезновение и появление, но элемент при этом останется в DOM.

Если нужно действительно размонтировать элемент, смоделируйте небольшой конечный автомат с такими фазами, как mounting, mounted, unmounting и unmounted. Удаляйте узел только после завершения анимации выхода.

Состояние определяет, какие классы анимации применяются на каждой фазе.

Логику автомата можно инкапсулировать в пользовательском хуке, который часто называют useMount. Он принимает требуемую видимость и возвращает признак того, должен ли элемент находиться в DOM, а также его текущую фазу.

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

Следуя распространённым соглашениям, при монтировании применяйте enter, а затем enter-active, а при удалении — exit, а затем exit-active. Базовый класс задаёт исходное состояние, а активный класс — конечное состояние и переход.

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

Чтобы определить момент завершения анимации выхода, отслеживайте событие transitionend на элементе. Когда оно срабатывает для выхода, переведите состояние в unmounted и удалите узел.

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

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

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

Есть одна важная тонкость: сначала нужно позволить браузеру отрисовать исходный класс и только потом добавить активный, иначе элемент скачком изменит состояние без перехода. Вызов requestAnimationFrame или принудительный перерасчёт между этими действиями гарантирует, что переход действительно выполнится.

Так браузер сначала зарегистрирует исходные значения.

Библиотека react-transition-group предоставляет компоненты Transition и CSSTransition, которые реализуют именно этот шаблон, включая жизненный цикл классов и момент размонтирования.

Ваша версия DIY повторяет основные идеи библиотеки, поэтому после самостоятельной реализации понять её становится легко.

Для одного простого затухания достаточно подхода с постоянным монтированием или небольшого хука — так Вы избежите зависимости. Если Вам нужны многочисленные согласованные переходы, списки с добавлением и удалением или сложная последовательность, библиотека сэкономит время и поможет избежать ошибок в крайних случаях.

Выбирайте подход с учётом реальной сложности анимации, необходимой Вашему приложению.

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

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

Проверьте, насколько хорошо Вы понимаете анимации выхода.

Вы узнали, почему анимации выхода сложны, о двух решениях — постоянном монтировании и конечном автомате монтирования, — как transitionend определяет момент размонтирования и как создать повторно используемый компонент Transition.

Вы также узнали, когда вместо DIY стоит использовать react-transition-group.