I’m trying to prevent the div size from expanding immediately.
I’ve tried using transition-duration but it’s not working.
You can try pressing the button to see the div expand immediately.
How do I make the speed not changing immediately?
var container = document.getElementById("test");
function up() {
container.style.width="300px";
}
function down() {
container.style.width="120px";
}.ct {
display: flex;
flex-direction: row;
transition-duration: 0.6s;
}
#test {
width: 120px;
height: 120px;
background-color: grey;
}<div class="ct">
<button onclick="up()">up</button>
<button onclick="down()">down</button>
</div>
<div id="test"></div>>Solution :
you have to add transition to #test element. like below:
var container = document.getElementById("test");
function up() {
container.style.width="300px";
}
function down() {
container.style.width="120px";
}.ct {
display: flex;
flex-direction: row;
}
#test {
width: 120px;
height: 120px;
background-color: grey;
transition-duration: 0.6s;
transition: ease width 0.2s;
}<div class="ct">
<button onclick="up()">up</button>
<button onclick="down()">down</button>
</div>
<div id="test"></div>