[removed] Trigger CSS Transition with window.setTimeout

Question

This is (obviously) part of a bigger project, but I am trying to trigger a CS transition on setTimeout.

(I know about using CSS animations, but this is not

Answer 1

This is because of how the browser queues reflow and relayout changes. The browser does not do these things sequentially like how you've structured your code. It adds the changes to a queue and attempts to perform multiple operations at once (for performance reasons).

The browser is trying to be "smart" here - it sees that the styles are going to wind up exactly as they were before, so the removal and re-addition of the attribute are batched together in one update and thus you see no change. Adding the setTimeout, even with a 0 second delay, forces the browser to reflow at that point.

Here's a link to another similar question: Force browser to trigger reflow while changing CSS

And here's a comprehensive list of methods/properties you can call in JS to force a reflow in your JS (instead of using setTimeout): https://gist.github.com/paulirish/5d52fb081b3570c81e3a