Programmiererforum

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

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]{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]
[code].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;
}

[/code]