CSS transition within JavaScript not working-CodePudding

Here is my HTML, CSS, JS

const Col = document.querySelectorAll('.col')

function onCol() {
  Col.forEach(function(el, idx) {
    el.style.transition = '0s';
    el.style.height = '0%';
    el.style.transition = '0.9s';
    el.style.height = '100%';
  });
}
onCol()

.work {
  display: flex;
  height: 140px
}

.col {
  background: red;
  width: 20px;
  height: 100%;
  margin-left: 5px;
  max-height: 0
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

I think that columns should become bigger SMOOTHLY WITH TRANSITION 0.9 !!!

but they do not.

If I type the word with el.style.height = '100%'; into setTimeOut, it will work.

but I don't want to make this in callback queue. I just want to solve this in the call stack.

and I want to know why doesn't this work now.

i changed this with for loop. but not works

CodePudding user response：

I would modify your code to do this mostly in CSS, using classes on the parent element to toggle the effect. Here I've used setInterval just to give an idea of what's happening.

Below that is a way of making it so that each bar animates in its own time.

const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 1500);

.work {
  display: flex;
  height: 140px;
}

.col {
  background: red;
  width: 20px;
  height: 100%;
  margin-left: 5px;
  transition: height 0.9s;
}

.work.hide .col {
  height: 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 5000);

.work {
  display: flex;
  height: 140px;
}

.col {
  background: red;
  width: 20px;
  height: 140px;
  margin-left: 5px;
}

.col:nth-child(1) {
  transition: height 0.9s 0s;
}
.col:nth-child(2) {
  transition: height 0.9s 1s;
}
.col:nth-child(3) {
  transition: height 0.9s 2s;
}
.col:nth-child(4) {
  transition: height 0.9s 3s;
}
.col:nth-child(5) {
  transition: height 0.9s 4s;
}

.work.hide .col {
  height: 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Gloomy Young set the intial height to 0, run function only after body is loaded and set desired transition duration and target height in func,

css

.work {display: flex; height: 140px}
.col {
    background: red;
    width: 20px;
    margin-left: 5px;
    height: 0;
 }

javascript

window.onload = () => {
    document.querySelectorAll('.col').forEach(i => { 
        i.style.transition = '1s';
        i.style.height = '100%';
    });
}

If you want not to use javascript. You can achieve this only using css animations.