WTF???? Проблема с анимацией

[cyber]

Возможно я упоротный, но какое то хрень творится.

Есть функция, которая отвечает за добаление класса и вызов другой функции которая установит координаты ( переменные top и left не используются ), все хорошо анимация работает.

пруф

function showAnimateWin( ) {
        var top = ( window.innerHeight - win.offsetHeight ) / 2,
            left = ( window.innerWidth - win.offsetWidth ) / 2;

         win.classList.add("modal-window-animate");

        setTimeout( function (){
             end();
        }, 0);

    };

Но, если сделать так (Просто убрать не используемые переменные), то не анимация не работает, точнее работает, но только 1 раз...
пруф

function showAnimateWin( ) {
        //var top = ( window.innerHeight - win.offsetHeight ) / 2,
         //   left = ( window.innerWidth - win.offsetWidth ) / 2;

         win.classList.add("modal-window-animate");

        setTimeout( function (){
             end();
        }, 0);

    };

Какого фига?

[cyber]

Да ну бред какой то, так тоже работает анимация
Достаточно просто получить win.offsetHeight

function showAnimateWin( ) {
        win.offsetHeight ;
     
         win.classList.add("modal-window-animate");

        setTimeout( function (){
             end();
        }, 0);

    };

Что за наркомания..

[ruslan_mart]

cyber, потому что при получении offsetHeight перерисовывается страничка, поэтому работает. Это такой хак. И setTimeout тут не нужен.

Я сам так делаю:

var elem = document.createElement('div');
elem.className = 'transition';
document.body.appendChild(elem);
elem.clientHeight; //HACK - без него анимации не будет
elem.classList.add('show');

[cyber]

Ruslan_xDD, ну так оно должно и без него работать..
Мне больше интересно почему без него не работает

[cyber]

Ппц короче, так работает

function showAnimateWin( ) {

         end();
         win.classList.add("modal-window-animate");

    };

http://jsfiddle.net/p2wozc8a/9/

Подсказали на stackoverflow , на вопрос почему получил ответ

@cyber_ua unfortunately to be honest I have no idea

[рони]

cyber,
Смена цвета div

[cyber]

рони, хм, по сути если я перемещаю окно, а потом добавляю transition то окно должно переместится без анимации, но на практике она работает...

[cyber]

рони, что можно почитать на эту тему, про то как работает css анимация?

[рони]

cyber,
по теме ничего не могу добавить

[Malleys]

что можно почитать на эту тему, про то как работает css анимация?

Читать можно тут, тут и тут