Jquery Css Function slow to add property to div?

Question

So basically I am trying to scale a div (starts from 0) when another is clicked but the scale origin should start from where the click happened. Sort of what apple does when you click on an app (the app opens up from where you clicked it).

The problem is trying to set the property of the scale origin which I do successfully but when i click on the div, this has no effect ! It only works when I set a timeout function to when I add the class that scales it fully

Class appeared to have been added before css is applied:

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 is applied with a delay (which scales from the origin specified but takes time)

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

Can I achieve the same thing without the timeout function, Thanks !

Answer 1

You would want to bind to transitionend

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

You may see the js fiddle here