Why does the animation run instantly?

Question

css

For practice, I decided to write my own JavaSript plugin for modal windows. I decided to add the ability to animate background'a, in theory, if the background animation function is enabled, then the background is added to the DOM before it is added opacity: 0;, and after the background has appeared in the DOM tree, it is given a CSS class in which there is a property opacity: 1;, but for some reason the background appears abruptly without animation.
https://codepen.io/anon/pen/ZMZjNN

if (this.options.overlayAnimation === true) {
        this.overlay.style.opacity = '0';
        this.popUp.parentNode.insertBefore(this.overlay, this.popUp);
        this.overlay.classList.add('uzi-popup-bganimate-on');
      } else {
        this.popUp.parentNode.insertBefore(this.overlay, this.popUp);
      }

A piece of code where what I wrote about above happens.
PS If you point out any errors or advise the best implementation option, I will be very grateful.

Answer 1

Firstly, they made a mistake with the name of the class (you could find this yourself).
Secondly, the browser tends to optimize making changes to the DOM tree, so that newly created elements will not be animated. For the animation to run, an additional reflow is needed, for which you can either wrap the addition of the class in setTimeout, or before adding the class, refer to one of the properties whose calculation causes reflow. Somehow so .