CSS transition within JavaScript not working

Question

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 class="work">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></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

I forget the specific wording, but basically while JavaScript is being executed, the DOM (and things like CSS) are essentially paused and do not update until the JavaScript being actively executed is done. This means you won't see CSS animation/transition updates while your JavaScript is still running. Using setTimeout() allows there to be a pause/break in the JavaScript execution and allows the DOM/CSS to update. — EssXTee
– EssXTee, Commented Nov 1, 2022 at 13:34
Ultimately there has to be a halt in the execution of the JavaScript if you want your page to update. A webpage is single threaded, and so because of this, CSS and HTML updates cannot happen while JavaScript is being actively executed. Using things like setTimeout just make the code (somewhat) asynchronous so that other things can be processed on the page's single thread. So no matter what there has to be some sort of pause/delay in the JavaScript if you want to actually see the change, and setTimeout is probably the simplest way to do that. — EssXTee
– EssXTee, Commented Nov 1, 2022 at 14:39
You can also use requestAnimationFrame if you prefer, but ultimately, it's the same thing that @EssXTee is talking about, making the change occur at another time. — Heretic Monkey
– Heretic Monkey, Commented Nov 1, 2022 at 15:19
However, transition is a property that should be set once, since it tells the browser how long future changes should take. Then change the height once and the browser will animate between the two states. I think you'd be better off adding the states to CSS classes, then toggle the classes. — Heretic Monkey
– Heretic Monkey, Commented Nov 1, 2022 at 15:25

Thirunahari ManindraTeja · Accepted Answer · 2022-11-01 14:04:59Z

3

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.

answered Nov 1, 2022 at 14:04

Thirunahari ManindraTeja

943 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gloomy Young Over a year ago

no no no, i just want this to make height 0 by javascript, and make height100%.

Heretic Monkey · Accepted Answer · 2022-11-01 15:43:35Z

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 class="work">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></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 class="work hide">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Collectives™ on Stack Overflow

CSS transition within JavaScript not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related