Всем привет!
Давайте представим, что от бизнеса поступил запрос: "Нам надо, чтобы при входе на сайт сразу же открывалось модальное окно авторизации для сканирования клиентского QR-кода."
Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать.
И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается.
При этом: логи в порядке, стейты меняются корректно, но модальное окно живет своей жизнью и наотрез отказывается работать, как ей предписано.
Я потратил довольно длительное время на поиски этой ошибки. Но затем, удалив setTimeout, который мы использовали для анимирования модального окна, заметил, что все стало работать корректно.
Длительный поиск вариантов анимирования открытия/закрытия модального окна не помог.
Но стоит отметить, что я узнал множество способов и комбинаций его анимирования: как при помощи сторонних зависимостей, так и нативных.
Использование сторонних зависимостей я отбросил сразу. Смириться, что все модальные окна на проекте отныне будут работать без красивых анимаций я не мог, поэтому сразу же приступил к поискам решения данной проблемы.
Совершенно случайно наткнувшись на статью @GragertVD, которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему.
Именно поэтому мне захотелось рассказать о том, как я это сделал.
В этой статье я расскажу:
