Why do I need a setTimeout for animation to work?

Question

In the code below, if I leave out the setTimeout, the transition doesn't work. What is the purpose of the setTimeout here?

  function showCircle (top, left, radius) {
  let circleDiv = document.querySelector(".circle"); 

  circleDiv.style.top = top + "px";
  circleDiv.style.left = left + "px";

  setTimeout (() => {
    circleDiv.style.width = radius*2 + "px";
  circleDiv.style.height = radius*2 + "px";
  },0)
}

showCircle (150,150,100);

score 2 · Answer 1 · answered Aug 18 '19 at 06:44

Without a delay (some browsers will require longer than a 0ms delay, which basically just makes the change wait until the stack is empty) the browser won't pick up that the css attributes changed.

Realistically, this has to do with browser "painting/repainting" for transitions.

Here is an article that addresses fixing this issue, in the same way you've "fixed" it.

http://www.mikechambers.com/blog/2011/07/20/timing-issues-when-animating-with-css3-transitions/

Why do I need a setTimeout for animation to work?

1 Answers1