I'm making a main page for my site. I was following tutorial how to make 2 in 1 login and register form (you click button and it shows you the other form), but when i finished, the first transition is not applying. I mean that it should make a slide transition every time when i click button. But as i said, when i click first time on button, there is no transition. Sorry for bad english and not very good css code, i'm not especially good in it.
My CSS Code:
.form-box {
width: 380px;
height: 480px;
margin-right: 20px;
margin-top: -155px;
float: right;
background: #fff;
padding: 5px;
overflow: hidden;
}
.button-box {
width: 250px;
height: 50px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 20px 9px #ff61241f;
border-radius: 30px;
}
.toggle-btn {
width: calc(250px/2);
padding: 0 20px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
float: left;
line-height: 50px;
color: black;
}
#btn {
top: 0;
left: 0;
position: absolute;
width: calc(250px/2);
height: 100%;
background: linear-gradient(to right, #ff105f, #ffad06);
border-radius: 30px;
transition: .5s;
}
.inputs-group {
width: 280px;
transition: .5s !important;
}
.input-field {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
input[type=submit] {
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, #ff105f, #ffad06);
border: 0;
outline: none;
border-radius: 30px;
}
.checkbox {
margin-top: 20px;
margin-bottom: 20px;
}
.login-form {
margin: auto;
transition: .5s;
}
.register-form {
margin-left: 450px;
margin-top: -225px;
transition: .5s;
}
My JS code responsible for moving forms:
$(() => {
const loginForm = $(".login-form");
const registerForm = $(".register-form");
const btn = $("#btn");
$(".toggle-btn-register").click(() => {
loginForm.css("margin-left", "-400px");
registerForm.css("margin-left", "50px");
btn.css("left", "125px");
});
$(".toggle-btn-login").click(() => {
registerForm.css("margin-left", "400px");
loginForm.css("margin-left", "50px");
btn.css("left", "0");
});
});
My HTML with CakePHP 2.10 code:
<?php
$this->loadHelper('Html');
$cakeDescription = 'CakePHP: the rapid development php framework';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo $this->Html->css('layout');
echo $this->Html->script('https://code.jquery.com/jquery-3.4.1.js');
echo $this->Html->script('main');
echo $this->Html->css('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
echo $this->Html->script('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
echo $this->Html->script('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js');
echo $this->Html->script("https://cdn.jsdelivr.net/npm/sweetalert2@9");
echo $this->Html->script('https://cdnjs.cloudflare.com/ajax/libs/granim/2.0.0/granim.js');
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->fetch('script');
?>
</head>
<body>
<nav>
<div class="col-xl-10 mx-auto">
<span class="logo my-auto">LOGO</span>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Login</a></li>
<li><a href="">Register</a></li>
</ul>
</div>
</nav>
<div class="col-xl-10 mx-auto content">
<div class="name">Phone Book</div>
<div class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam quod saepe, distinctio at eius fuga maiores laborum consequuntur numquam porro tempore ullam et minus blanditiis repellat placeat molestiae totam adipisci?</div>
<div class="form-box">
<div class="button-box">
<div id="btn"></div>
<button type="button" class="toggle-btn toggle-btn-login">Log In</button>
<button type="button" class="toggle-btn toggle-btn-register">Register</button>
</div>
<?php
// LOG IN FORM
echo $this->Form->create('Login', array('type' => 'post', 'url' => '/login-user', 'class' => 'login-form inputs-group'));
echo $this->Form->input('login',array('placeholder' => 'Login', 'label' => '', 'class' => 'input-field'));
echo $this->Form->input('password',array('placeholder' => 'Password', 'label' => '', 'class' => 'input-field'));
echo $this->Form->input('rememberMe',array('label' => '<span>Remember Me</span>', 'type' => 'checkbox', 'class' => 'check-box'));
echo $this->Form->end('Log In');
// REGISTRATION FORM
echo $this->Form->create('Register', array('type' => 'post', 'url' => '/register-user', 'class' => 'register-form inputs-group'));
echo $this->Form->input('login',array('placeholder' => 'Login', 'label' => '', 'class' => 'input-field'));
echo $this->Form->input('password',array('placeholder' => 'Password', 'label' => '', 'class' => 'input-field'));
echo $this->Form->input('password',array('placeholder' => 'Confirm Password', 'label' => '', 'class' => 'input-field'));
echo $this->Form->input('agreeToRules',array('label' => '<span>I agree to Terms & Conditions</span>', 'type' => 'checkbox', 'class' => 'check-box'));
echo $this->Form->end('Register');
?>
</div>
</div>
<?php echo $this->fetch('content'); ?>
<footer>
<div class="col-xl-10 mx-auto">
<span id="footer-text" class="mx-auto">Kamil Waniczek <?= date("Y"); ?> © All rights reserved.</span>
</div>
</footer>
</body>
</html>