I am trying to animate the transition of the display of my login and register modals, I know this can't simply be done by doing transition: display 1s. This is why I have been using opacity since this post has an answer where they make use of the opacity. I have been trying to implement it in my own project but it's not doing anything at the moment.
function toggleRegister() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
registerPageTitle = "Register";
if (registerModal.style.display === "none") {
loginModal.classList.remove("modal");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal-hidden");
loginModal.classList.remove("modal-transition")
login.style.display("none");
registerModal.classList.remove("modal-hidden");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal");
registerModal.classList.remove("modal-transition")
register.style.display("block")
document.title = registerPageTitle;
} else {
return;
}
}
function toggleLogin() {
var register = document.getElementById("register");
var login = document.getElementById("login");
var registerModal = document.getElementById("registerModal");
var loginModal = document.getElementById("loginModal");
loginPageTitle = "Login";
if (loginModal.style.display === "none") {
registerModal.classList.remove("modal");
registerModal.classList.add("modal-transition")
registerModal.classList.add("modal-hidden");
registerModal.classList.remove("modal-transition")
register.style.display("none");
loginModal.classList.remove("modal-hidden");
loginModal.classList.add("modal-transition")
loginModal.classList.add("modal");
loginModal.classList.remove("modal-transition")
login.style.display("block");
document.title = loginPageTitle;
} else {
return;
}
}.header a.register {
display: block;
transition: color 0.2s;
}
.header a.login {
display: none;
transition: color 0.2s;
}
.modal-void {
display: flex;
position: relative;
justify-content: center;
align-content: center;
align-items: center;
flex: 1;
}
.loginModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.registerModal {
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-content: flex-start;
top: 40%;
transform: translateY(-50%);
width: 50%;
max-width: 500px;
max-height: 550px;
background-color: #fff;
box-shadow: 0px 2.5px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
/*Modal transition*/
.modal {
display: flex;
opacity: 1;
}
.modal-hidden {
display: none;
opacity: 0;
}
.modal-transition {
display: flex;
opacity: 0;
}
.modal-animate {
transition: opacity 1.2s ease;
}<div class="header">
<a class="register" id="register" onclick="toggleRegister()">Register</a>
<a class="login" id="login" onclick="toggleLogin()">Login</a>
</div>
<div class="modal-void">
<div class="loginModal modal-animate modal" id="loginModal">
<h1>Login</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="loginUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="loginPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="button">
<input type="submit" id="loginSubmit" placeholder=" " value="Login">
</label>
<a href="#">Password forgot?</a>
</form>
</div>
<div class="registerModal modal-animate modal-hidden" id="registerModal">
<h1>Register</h1>
<form action="dashboard.html" method="post">
<label class="userfield">
<input type="text" id="registerUsername" placeholder=" ">
<p>Username</p>
</label>
<label class="userfield">
<input type="password" id="registerPassword" placeholder=" ">
<p>Password</p>
</label>
<label class="userfield">
<input type="password" id="registerPasswordRepeat" placeholder=" ">
<p>Password repeat</p>
</label>
<label class="button">
<input type="submit" id="registerSubmit" placeholder=" " value="Register">
</label>
</form>
</div>
</div>So what I am trying to do here is add and remove classes to the modals so I can transition them, although nothing happens. I'm thinking it has something to do with my CSS and JavaScript that isn't done correctly, most likely my script I suspect.
If I forgot some code which makes this unclear, let me know and I'll add it.
