Alternative zu setTimeout zum Verwalten des Animationsstatus in React ⇐ CSS

[Guest]

Ich arbeite an einer React-Komponente, die Animationen für ein Anmeldemodal verarbeitet. Derzeit verwende ich setTimeout in Kombination mit useEffect, um die Aktivierung von Animationsklassen zu verzögern, wenn das Modal geöffnet wird.
setTimeout führt eine Verzögerung ein, um sicherzustellen, dass Animationen korrekt ausgelöst werden, wenn das Modal angezeigt wird. Allerdings bin ich der Meinung, dass dieser Ansatz nicht ideal ist, und ich frage mich, ob es einen besseren oder eher React-idiomatischen Weg gibt, das gleiche Ergebnis zu erzielen, ohne sich auf setTimeout zu verlassen.

Code: Select all

{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]);

Code: Select all

.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;
}