transition-duration not working when used with Boostrap .form-control
Question
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?
1 answers
solution1
1 ACCPTED 2020-10-09 23:17:00
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 )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.