Probleme transition css (html, javascript) sur le forum Programmation - 08-06-2023 13:54:50

Liste des sujets

Probleme transition css (html, javascript)

Maxou83a

Niveau 1

08 juin 2023 à 13:54:50

Bonjour je rencontre un probleme en suivant une vidéo tutoriel pour créer un système de connexion/inscription (lien de la vidéo:https://www.youtube.com/watch?v=p1GmFCGuVjw&t=842s&ab_channel=Codehal) les transitions ne marchent pas et je ne comprends pas pourquoi, je voudrais avoir de l'aide s'il vous plait.
Voici mon code html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h2 class="logo">Logo</h2>
<nav class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<button class="btnLogin-popup">Login</button>
</nav>
</header>

<div class="form-box login">
<h2>Login</h2>
<form action="#">
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label><input type="checkbox">
Remember me</label>
<a href="#">Forgot Password</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="login-register">
<p>Don't have an account ?<a href="#" class="register-link">Register</a></p>
</div>
</form>
</div>

<div class="form-box register">
<h2>Registration</h2>
<form action="#">
<div class="input-box">
<span class="icon">
<ion-icon name="person"></ion-icon>
</span>
<input type="text" required>
<label>Username</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label><input type="checkbox">
I agree to the terms & conditions</label>
</div>
<button type="submit" class="btn">Register</button>
<div class="login-register">
<p>Already have an account ?<a href="#" class="login-link">Register</a></p>
</div>
</form>
</div>
</div>

Mon css:

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(gris.png) no-repeat;
background-size: cover;
background-position: center;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}

.logo {
font-size: 2em;
color: #fff;
user-select: none;
}

.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}

.navigation a::after {
contain: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: #fff;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: .5s;
}

.navigation a:hover::after {
transform: scaleX(1);
}

.navigation .btnLogin-popup {
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: #fff;
font-weight: 500;
margin-left: 40px;
}

.navigation .btnLogin-popup:hover {
background: #fff;
color: #162938;
}

.wrapper {
position: relative;
width: 400px;
height: 440px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 20px;
backdrop-filter: blur(20px);
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transform: scale(0);
transition: transform .5s ease, height .2s ease;
}

.wrapper.active-popup {
transform: scale(1);
}

.wrapper.active {
height: 520px;
}

.wrapper .form-box {
width: 100%;
padding: 40px;
}

.wrapper .form-box.login {
transition: transform .18s ease;
transform: translateX(0);
}

.wrapper.active .form-box.login {
transition: none;
transform: translateX(400px);
}

.wrapper .form-box.register {
position: absolute;
transition: none;
transform: translateX(400px);
}

.wrapper.active .form-box.register {
transition: transform .18s ease;
transform: translateX(0);
}

.wrapper .icon-close {
position: absolute;
top: 0;
right: 0;
width: 45px;
background: #162938;
font-size: 2em;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 20px;
cursor: pointer;
z-index: 1;
}

.form-box h2 {
font-size: 2em;
color: #162938;
text-align: center;
}

.input-box {
position: relative;
width: 100%;
height: 50px;
border-bottom: 2px solid #162938;
margin: 30px 0;
}

.input-box label {
position: absolute;
top: 50%;
left: 5px;
transform: translate(-50%);
font-size: 1em;
color: #162938;
font-weight: 500;
pointer-events: none;
transition: .5s;
}

.input-box label:focus~label,
.input-box label:valid~label {
top: -5px;
}

.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 1em;
color: #162938;
font-weight: 600;
padding: 0 35px 0 5px;
}

.input-box .icon {
position: absolute;
right: 8px;
font-size: 1.2em;
color: #162938;
line-height: 57px;
}

.remember-forgot {
font-size: .9em;
color: #162938;
font-weight: 500;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
}

.remember-forgot label input {
accent-color: #162938;
margin-right: 3px;
}

.remember-forgot a {
color: #162938;
text-decoration: none;
}

.remember-forgot a:hover {
text-decoration: underline;
}

.btn {
width: 100%;
height: 45px;
background: #162938;
border: none;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
color: #fff;
font-weight: 500;
}

.login-register {
font-size: .9em;
color: #162938;
text-align: center;
font-weight: 500;
margin: 25px 0 10px;
}

.login-register p a {
color: #162938;
text-decoration: none;
font-weight: 600;
}

.login-register p a:hover {
text-decoration: underline;
}

et javascript:
const wrapper = document.querySelector('.wrapper');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');
const btnPopup = document.querySelector('.btnLogin-popup');
const iconClose = document.querySelector('.icon-close');

registerLink.addEventListener('click', ()=> {
wrapper.classList.add('acitve');
});

loginLink.addEventListener('click', ()=> {
wrapper.classList.remove('acitve');
});

btnPopup.addEventListener('click', ()=> {
wrapper.classList.add('acitve-popup');
});

iconClose.addEventListener('click', ()=> {
wrapper.classList.remove('acitve-popup');
});

Tout devrait marché mais pas les transitions je ne comprends pas pourquoi, merci d'avance pour votre aide.

JeTeDesse

Niveau 5

08 juin 2023 à 19:55:19

Frérot si tu veux que je t'aides va falloir être plus clair et rendre ça lisible, je ne suis pas gpt.

Aide à l'achat Mac
Macintosh
Création de sites web
Création de Jeux
Linux
Programmation
Internet
Steam Deck
Hardware

La vidéo du moment

News jeu

43 789 spectateurs

Star Wars ne deviendrait-elle pas une franchise maudite ? Un jeu vidéo très attendu serait en danger

Lors de la présentation de la (magnifique) bande-annonce de Star Wars Eclipse aux Game Awards de 2021, les images avaient réussi à convaincre et donner envie aux fans, surtout avec la réputation du studio français Quantic Dream.

Toutes les news jeu