Скольжение работает неправильно. Я хочу слева. Это исходит справа ⇐ CSS

[Anonymous]

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

function toggleForms() {
const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');
const container = document.querySelector('.container');
const title = document.querySelectorAll('.form-title');
const toggleText = document.querySelectorAll('.toggle-text');

if (loginForm.classList.contains('active')) {
// LOGIN slides out to the left, SIGNUP slides in from the left
loginForm.style.animation = 'login-slide-out-to-left 0.6s forwards';
signupForm.style.animation = 'signup-slide-in-from-left 0.6s forwards';
container.style.backgroundColor = '#F2ECBE'; // Green background for this transition
} else {
// SIGNUP slides out to the right, LOGIN slides in from the right
loginForm.style.animation = 'login-slide-in-from-right 0.6s forwards';
signupForm.style.animation = 'signup-slide-out-to-right 0.6s forwards';
container.style.backgroundColor = '#9A3B3B'; // Blue background for this transition
}

// Fade out text
title.forEach(el => el.style.animation = 'fade-out 0.4s forwards');
toggleText.forEach(el => el.style.animation = 'fade-out 0.4s forwards');

setTimeout(() => {
// Toggle active form
loginForm.classList.toggle('active');
signupForm.classList.toggle('active');

// Reset animations
loginForm.style.animation = '';
signupForm.style.animation = '';

// Fade text back in
title.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
toggleText.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
}, 400);
}

// Initialize the active form on page load
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('loginForm').classList.add('active');
});

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

/* Colors for reference: 9A3B3B, C08261, E2C799, F2ECBE */
body, html {
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}

.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #F2ECBE;
overflow: hidden;
}

/* Default form styling */
.form {
display: none; /* Initially hidden */
width: 100%;
height: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
position: absolute;
overflow: hidden;
transition: transform 0.6s ease-in-out;
}

/* Show the active form */
.form.active {
display: flex;
animation: slide-in 0.6s forwards;
}

.form-content {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 5%;
width: 100%;
animation: fade-in 0.6s;
}

/* Left section with background */
.login-left, .signup-right {
width: 70%;
background-color: #9A3B3B;
}

/* Right section */
.login-right, .signup-left {
width: 30%;
background-color: #F2ECBE;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 5%;
}
/* Sliding Animation for Forms */
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}

/* Text Animation */
@keyframes fade-out {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-50px); }
}

@keyframes fade-in {
0% { opacity: 0; transform: translateX(50px); }
100% { opacity: 1; transform: translateX(0);  }
}

.form-title, .toggle-text {
animation: fade-in 0.6s;
}

/* Form elements styling */
.form-group {
margin-bottom: 15px;
width: 80%;
text-align: left;
}

.form-group label, button {
display: block;
font-size: 14px;
margin-bottom: 5px;
}

button {
width: 80%;
padding: 10px;
font-size: 16px;
color: #F2ECBE;
background-color: #AD5F4E;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #AD5F4E;
}

.toggle-text {
color: #AD5F4E;
cursor: pointer;
text-decoration: underline;
margin-top: 10px;
}

/* Slide in SIGNUP from the left */
@keyframes signup-slide-in-from-left {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

/* Slide out SIGNUP to the right */
@keyframes signup-slide-out-to-right {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}

/* Slide in LOGIN from the right */
@keyframes login-slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}

/* Slide out LOGIN to the left */
@keyframes login-slide-out-to-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

/* Ensure each animation holds its final position */
.form {
animation-fill-mode: forwards;
}

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

Pepper App







  

Login


Username or Email


Password


Login

Don't have an account? Register






Sign Up


Username


Email


Password


Sign Up

Already have an account? Login

Когда я нажимаю «Войти» в форме регистрации, она сдвигается вправо, Я вижу фон #9A3B3B. И вход в систему скользит справа (за пределами монитора). Это правильно.
Когда я нажимаю «Зарегистрироваться» в форме входа. Форма входа сдвигается влево.
Я вижу фон #F2ECBE, а затем форма регистрации скользит справа.
Но это неправильно. Я хочу, чтобы ЗАРЕГИСТРИРОВАТЬСЯ слайды слева за монитором.
Я несколько раз предлагал ChatGPT, но он не может решить проблему.
Помогите мне, пожалуйста, ЛЮДИ.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -the-right