Deaktivieren und Aktivieren CSS-Übergangsposition zu initialisieren

Question

In Javascript Ich möchte, ohne Übergänge divs mit Rotationen positionieren eine Startposition für eine Animation (mit CSS-Übergang gemacht) zu erreichen. Nach dieser Anfangsposition möchte ich den Übergang aktivieren.

Ich habe einen Codepen dort: http://codepen.io/3MO/pen/ZLoKbv Es scheint, dass der Codepen nicht funktioniert, wird es auf meinem lokalen funktioniert, wird die window.onload nicht berücksichtigt.

Wie dem auch sei: - die divs haben noch keine Übergang attribues gesetzt. - Ich transformiere die divs, entsprechend der Zahl geklickt. - Danach möchte ich Übergänge starten, also füge ich eine Klasse zu den divs hinzu, die die Übergangseigenschaften definieren.

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

Das Problem ist, die anfängliche Positionierung der divs nimmt die Übergangseigenschaften, auch wenn sie nach festgelegt sind.

jeder kann eine richtige Art und Weise sagen Sie mir Übergang für eine erste Positionierung zu deaktivieren, aktivieren Sie dann den Übergang so dass diese anfängliche Positionierung nicht Übergang nicht verwendet?

Danke!

Answer 1

ein Timeout zum addClass Hinzufügen:

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

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

codepen

Es scheint, dass dies wurde bereits beantwortet, Downvoted und gelöscht ... Ich weiß nicht, warum