Jquery Css Funzione lenta per aggiungere proprietà a div?

Question

Quindi in sostanza sto provando a ridimensionare un div (parte da 0) quando viene fatto clic su un altro, ma l'origine della bilancia dovrebbe iniziare da dove è avvenuto il clic. Una specie di cosa fa Apple quando fai clic su un'app (l'app si apre da dove l'hai fatta clic).

Il problema sta tentando di impostare la proprietà dell'origine della scala che eseguo correttamente ma quando faccio clic sul div, questo non ha alcun effetto! Funziona solo quando ho creato una funzione di timeout per quando aggiungo la classe in grado di scalare fino in fondo

classe sembra essere stato aggiunto prima di applicare css:

var xPosSTR = 30+'px'; 
var yPosSTR = 30+'px'; 

     $('.box-detail').css({ 
      'transform-origin':   '' + xPosSTR + ' ' + yPosSTR + ' 0px', 
      '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px' 
     }); 

     $(".box-detail").addClass("box-reveal-prop"); 

Class viene applicato con un ritardo (che scala dall'origine specificata, ma richiede tempo)

var xPosSTR = 30+'px'; 
var yPosSTR = 30+'px'; 

     $('.box-detail').css({ 
      'transform-origin':   '' + xPosSTR + ' ' + yPosSTR + ' 0px', 
      '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px' 
     }); 
     setTimeout(function(){ 
      $(".box-detail").addClass("box-reveal-prop"); 
     }, 2000); 

css: {

.box-detail { 
    display: inline-block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    transition: 0.3s; 
    z-index: 1000; 
    transform:scale(0,0); 
} 

.box-reveal-prop { 
    transform:scale(1,1); 
} 

Posso ottenere la stessa cosa senza la funzione di timeout, grazie!

Answer 1

Si vorrebbe legarsi a transitionend

$('.box-detail') 
    .bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", 
     function(){ 
      $(".box-detail").addClass("box-reveal-prop"); 
}); 

Si può vedere il violino js here