Отключение и включение перехода css для инициализации позиции

Question

В javascript я хочу позиционировать divs с поворотами без переходов, чтобы достичь исходной позиции для анимации (сделанной с переходом css). Итак, после этой начальной позиции я хочу включить переход.

Я сделал код там: http://codepen.io/3MO/pen/ZLoKbv Кажется, что код не работает, он будет работать на моем локальном, window.onload не учитывается.

В любом случае: - divs не имеет каких-либо атрибутов перехода. - Я преобразую divs, в соответствии с цифрой, нажатой. - После этого я хочу начать переходы, поэтому добавляю класс в div, который определяет свойства перехода.

function onThumbnailClick(event) { 
    var index = parseInt(event.target.id.split('-')[1]); 

    //initialize the div position without transition : 
    initPortraitPanel(index); 
    //then I "activate" the transition : 
    $('.portraitDiv').addClass('active-transition'); 
    //After that I want to launch transitions... 
}  

.active-transition { 
     transition: 0.5s; 
} 

Проблема в том, что начальное позиционирование divs принимает свойства перехода, даже если они установлены после.

Любой может сказать мне правильный способ отключить переход для первоначального позиционирования, а затем активировать переход, чтобы это начальное позиционирование не использовало переход?

Спасибо!

Answer 1

Добавление таймаут в addClass:

function onThumbnailClick(event) { 
    var index = parseInt(event.target.id.split('-')[1]); 

    initPortraitPanel(index); 
    $('.portraitDiv').setTimeout(addClass('active-transition'), 50); 
} 

codepen

Кажется, что это было уже ответили, downvoted, и удалил ... Я не знаю, почему