Is there a way to incorporate animations into the "Forgot Password?" element using JavaScript?
document.querySelectorAll(`button`).forEach(btn =>
btn.addEventListener(`click`, () => {
if (btn.id === 'login-btn') {
forgotPassword.classList.add("fade1");
forgotPassword.classList.remove("fade0");
submitLoginInfo.textContent = "Log In";
} else {
forgotPassword.classList.add("fade0");
forgotPassword.classList.remove("fade1");
submitLoginInfo.textContent = "Sign Up";
}
})
);.fade0 {
animation: 1s fadeAway ease-out forwards;
}
.fade1 {
animation: 1s fadeIn ease-in-out forwards;
}
@keyframes fadeAway {
from {opacity: 1};
to {opacity: 0};
}
@keyframes fadeIn {
from {opacity: 0};
to {opacity: 1};
}<h1 id="submitLoginInfo">-</h1>
<div id="forgotPassword">thing</div>
<button id="login-btn">fadein</button>
<button id="not-login-button">fadeout</button>While adding the fade1 class results in the expected behavior with the animations playing whenever the login button is clicked, the fading out animation of the message does not seem to work. Any insights on how to resolve this issue? (full code available at: )