Trying to change the height of a div but want it to do it over time

Trying to change the height of a div but want it to do it over time.

I have some css transition for everything to change over the course of .5s as marked by an asterix symbol in my css file and that works for everything else that is css related… but when i use javascript to change the height of a div, it just changes the height instantly. How can I make it that the transition happens over my set .5s time?

Thanks ahead,

Line

Since Javascript is compiled at run-time, any (final) calculations will be set as if they happened instantly.
Any asynchronous actions usually have to be triggered by either a call-back or promise. You can add events to the event loop with set interval.

What you can do is set an interval function if you want to do it purely in Javascript.

for instance:

const growObject = (objectTarg, nHeight) => {
  let tHeight = 0; 
  let growTarget = setInterval(()=>{ 
   if(tHeight < nHeight){ 
     tHeight = tHeight + 10;
     objectTarg.style.height = tHeight + "px"; 
   }else{
     clearInterval(growTarget); 
   } 
  }, 10);
}

growObject( document.getElementById("test"), 600 );

Clear interval takes two parameters. The functions to be called and how long it will take to complete. 1000 for every second. So you may want an intermediary parameter that divides the final target size by the time you want it to complete in, to give you a pixel or percentage per iteration growth rate. That way it can remain flexible and you can pass in new parameters and have them transition smoothly.

1 Like

Thanks Obsidian,

I appreciate the code and explanation. I will try it out.

Thanks again,

Line

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook