Ошибка анимации перехода

Question

Если я использую свойство showAnimateWin offsetHeight, работа анимации. example

function end() { 

    var top = (window.innerHeight - win.clientHeight)/2, 
     left = (window.innerWidth - win.clientWidth)/2; 

    win.style.top = top + "px"; 
    win.style.left = left + "px"; 
} 

function showAnimateWin() { 
     win.offsetHeight ;//here 

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

Если я извлекал win.offsetHeight, анимация работы только один раз. example

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

Почему не будет работать без win.offsetHeight?

Answer 1

Причина, вероятно, связана с тем, что win.offsetHeight; заставляет метод ждать несколько миллисекунд, прежде чем переход может начать снова. Если вы положите alert(1); вместо win.offsetHeight;, он все равно будет работать. Вам нужно дождаться завершения перехода до начала новой анимации.

UPDATE: Fiddle Link

Это должно работать без каких-либо задержек (проверьте скрипку):

window.setTimeout(function() { 
     showAnimateWin(); 
    }, 25);