Альтернатива setTimeout для управления состоянием анимации в React ⇐ CSS

[Anonymous]

Я работаю над компонентом React, который обрабатывает анимацию для модального входа в систему. В настоящее время я использую setTimeout в сочетании с useEffect для задержки активации классов анимации при открытии модального окна.
SetTimeout вводит задержку, чтобы гарантировать правильный запуск анимации при отображении модального окна. Однако я считаю, что этот подход не идеален, и мне интересно, есть ли лучший или более идиоматический React-способ достижения того же результата, не полагаясь на setTimeout.
{loginOpen && (

className={`nav-background-fade ${fadeAnimation ? "nav-background-fade-animation" : ""}`}
onClick={(e) => handleCloseLoginBox(e)}
>

Login


)}

useEffect(() => {
if (loginOpen) {
const timer = setTimeout(() => {
setfadeAnimation(true);
}, 100);
return () => clearTimeout(timer);
} else {
setfadeAnimation(false);
}
}, [loginOpen]);


.nav-background-fade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
transition: opacity 1s ease;
opacity: 0;
}

.nav-background-fade-animation {
opacity: 1;
}

.right-side-page {
position: fixed;
top: 0;
right: -20vw;
width: 20vw;
height: 100vh;
background-color: var(--main-white-color);
z-index: 999;
transition: right 0.3s ease;
}

.right-side-page-animation {
right: 0;
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... e-in-react