Почему анимация проходит моментально?

Question

[uzi_no_uzi]

Для практики решил написать свой JavaSript плагин для модальных окон. Решил добавить возможность анимации background'a, по идее, если функция анимации фона включена, то, фону перед его добавлением в DOM добавляется opacity: 0;, а уже после того, как фон появился в DOM-дереве, ему задается CSS класс в котором имеется свойство opacity: 1;, но по какой-то причине фон появляется резко, без анимации.

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);
      }

Кусок кода, где происходит то, о чем я писал выше.

P.S. Если укажите на какие-либо ошибки или посоветуете лучший вариант реализации, буду очень благодарен.

Answer 1

[0xD34F]

Во-первых - ошиблись с именем класса (это вы могли бы и сами обнаружить).

Во-вторых - браузер стремится оптимизировать внесение изменений в DOM-дерево, так что свежесозданные элементы анимироваться не будут. Чтобы анимация выполнилась, нужен дополнительный reflow, для чего можно либо обернуть добавление класса в setTimeout, либо перед добавлением класса обратиться к одному из свойств, расчёт которых вызывает reflow. Как-то так.