Jquery Css函数缓慢向div添加属性？

Question

所以基本上我试图在点击另一个时缩放div(从0开始)但是缩放原点应该从点击发生的地方开始.点击应用程序时苹果的功能排序(应用程序从您点击它的位置打开).

问题是尝试设置我成功的比例原点的属性但是当我点击div时,这没有效果!它只适用于我设置超时功能时添加完全缩放它的类

在应用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");

类被应用延迟(从指定的原点缩放但需要时间)

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

没有超时功能我可以实现同样的功能,谢谢!

Answer 1

你想要绑定到transitionend

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

你可能会在这里看到 js 小提琴