javascript - Jquery Css 函数向 div 添加属性很慢？

Question

所以基本上我试图在单击另一个 div 时缩放一个 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

你会想要绑定(bind)到 transitionend

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

你可能会看到 js fiddle here