transition-duration not working when used with Boostrap .form-control

I’m developing a Sign In registration box in HTML, CSS, and JS using Bootstrap.

I made a simple animation where, on the click of the button, the middle input field slide on the left with the input fields on top and bottom goes down and up, like a closing and opening effect.

With plain HTML and no Bootstrap classes imported everything works fine. As soon as I add the class form-control to the input field the transition-duration: 0.5s; in the CSS code seems not working anymore.

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/popper.js@1.16.1/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>

The live code is available also here https://codepen.io/nicocaldo/pen/pobvGVV

Am I missing something?

Answer

You set a duration, but you didn’t tell it what to animate. So, you need to add transition-property: transform; too. To animate everything you set, you could set it to all, but only transform is needed so that works. Or for short, you could replace the entire thing with just transition: all 0.5s;. (https://codepen.io/phpdude/pen/MWeYLZP)

Advertisement

Answer