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