Страница входа не переходит должным образом ⇐ CSS

[Anonymous]

Я создал стандартную страницу входа, которая должна скользить по экрану, когда вы пытаетесь зарегистрироваться, за исключением того, что когда я нажимаю кнопку «Зарегистрироваться», ничего не происходит, мой JS связан правильно, и мой CSS тоже выглядит нормально, и никаких ошибок не появляется. в журнале консоли Chrome. Страница входа (https://i.sstatic.net/3qVc8XlD.png)
Вот соответствующий код:

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const main = document.getElementById('main');

signUpButton.addEventListener('click', () => {
main.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
main.classList.remove('right-panel-active');
});
});

Код: Выделить всё

.container .right-panel-active .sign-in{
transform: translateX(100%);
}

.container .right-panel-active .sign-up{
transform: translateX(100%);
opacity: 1;
z-index: 5;
}

.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}

.container .right-panel-active .overlay-container{
transform: translateX(-100%);
}

.overlay{
position: relative;
color: #ffff;
background: #ff416c;
left: -100%;
height: 100%;
width: 200%;
background: linear-gradient(to right,#ff4b28,#ff228c);
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
transform: translateX(50%);
}

.overlay-left, .overlay-right{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-left{
transform: translateX(-20%);
}

.overlay-right{
right: 0;
transform: translateX(0);
}

.container .right-panel-active .overlay-left{
transform: translateX(0);
}

.container .right-panel-active .overlay-right{
transform: translateX(20%);
}

Код: Выделить всё

Login Form






Create Account
or use your email for registration




Sign Up



Sign In
or use your account


Sign In




Welcome Back!
To stay connected with us, please login
with your personal info
Sign In

Hello Friend!
Enter your personal details and start
your journey with us
Sign Up

Я проверил наличие ошибок в консоли, ничего не было

Подробнее здесь: https://stackoverflow.com/questions/787 ... n-properly