Prevent div to expand immediately-CodePudding

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 >
  <button onclick="up()">up</button>
  <button onclick="down()">down</button>
</div>

<div id="test"></div>

CodePudding user response：

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 >
  <button onclick="up()">up</button>
  <button onclick="down()">down</button>
</div>

<div id="test"></div>

CodePudding user response：

You can add transition effect on that div using CSS.

as per below

#test {
    transition: width 2s ease 0s;
}

CodePudding user response：

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: width 1s linear 0s;
}

<div >
  <button onclick="up()">up</button>
  <button onclick="down()">down</button>
</div>

<div id="test"></div>

Try to use linear and play around the transition speed.