javascript - css 子元素transition动画为什么无效？

Question

写了个模态窗口的飞入效果

<p id=mask>
     <p id=tips>提示</p>
</p>

#mask{
    display: none;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
}
#tips{
    position: absolute;
    background-color: #0b93d5;
    width: 600px;
    height: 200px;
    text-align: center;
top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -100px;
font-size: 16px;
    opacity: 0;
    -webkit-transform:scale(3) ;
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform:scale(3) ;
    -webkit-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
    -moz-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
    -ms-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
    -o-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
    transition: transform 0.8s ease-in,opacity 0.8s ease-in;
}

 $("#test").click(function(){
        $("#mask").show();
        $("#tips").css({
            '-webkit-transform':'scale(1)',
            '-moz-transform': 'scale(1)',
            '-ms-transform': 'scale(1)',
            '-o-transform':'scale(1)',
            'opacity':1
        });
        
        

将隐藏的mask显示后，tips直接显示动画最后的状态，整个动画的过程跳过了，但是我把mask的display:none去掉，再点击测试，动画效果正常。我在改变css属性前已经把mask显示了，原理上跟我第二种测试方法应该没有任何区别。找不到原因。。谁来解释下。。

更新：
我把

$("#tips").css({
                '-webkit-transform':'scale(1)',
                '-moz-transform': 'scale(1)',
                '-ms-transform': 'scale(1)',
                '-o-transform':'scale(1)',
                'opacity':1
            });
            
    
    

用setTimeout(function(){},0)包裹起来结果就没问题了。。还是不知道是什么原因

Answer 1

因为show和后面的animate都是修改style，其实是一次渲染的，所以不会有动画，解决方法是，show后面延迟一下，强制分成两次渲染，比如：

$(...).show();
setTimeout(function(){
  $(...).css(...);
})

Answer 2

setTimeout在这里的作用是强制触发重绘，否则由于渲染引擎的优化，动画根本出不来。
另外，建议写成:

css:
.before {
这里写初始样式和transition
}
.before .after {
这里写之后的样式
}
然后在js里addClass就行了。当然，记得setTimeout