I've been working on a Sign In registration box using HTML, CSS, and JS with the help of Bootstrap.
I added a simple animation where clicking a button makes the middle input field slide to the left while the top and bottom input fields move up and down, creating a closing and opening effect.
Initially, everything worked fine without any Bootstrap classes. But when I added the form-control class to the input field, the transition duration specified in the CSS (transition-duration: 0.5s;) seemed to stop working.
Here's a snippet of my code:
const menuBtn = document.querySelector('.button');
const repeatInput = document.querySelector('.new_pss');
const repeatInput_1 = document.querySelector('.user');
const repeatInput_2 = document.querySelector('.new_pss_rpt');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
repeatInput.classList.add('open');
repeatInput_1.classList.add('open');
repeatInput_2.classList.add('open');
document.getElementsByClassName('new_pss_rpt')[0].placeholder='Password';
menuOpen = true;
} else {
repeatInput.classList.remove('open');
repeatInput_1.classList.remove('open');
repeatInput_2.classList.remove('open');
document.getElementsByClassName('new_pss_rpt')[0].placeholder='Repeat Password';
menuOpen = false;
}
});html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.button{
position:relative;
margin-top: 10px;
}
.new_pss.form-control,
.user.form-control,
.new_pss_rpt.form-control{
transition-duration: 0.5s;
}
.new_pss.form-control.open {
transform: translateX(-300px);
opacity: 0%;
}
.input{
padding: 2px;
}
.user.form-control.open{
transform: translateY(13px);
}
.new_pss_rpt.form-control.open{
transform: translateY(-13px);
}<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body class="text-center">
<form class="form-signin">
<div class="input">
<input type="text" class="user form-control" placeholder="Username"></input>
</div>
<div class="input">
<input type="text" class="new_pss form-control" placeholder="Password"></input>
</div>
<div class="input">
<input type="text" class="new_pss_rpt form-control" placeholder="Repeat Password"></input>
</div>
<div class="btn">
<button type='button' class="button">Sign In Test</button>
</div>
</form>You can find the live version of this codehere.
Do you see what might be causing this issue?