css – 从display none更改为block时,转换不起作用

我注意到当元素也从display none变为block时,转换不起作用.这是为什么？如果我删除display属性,它可以工作.

CSS：

#box {
    width: 150px;
    height: 150px;
    background: red;
    transform: scale(0);
    display: none;
    transition: transform .5s;
}
    #box.active {
        transform: scale(1);
        display: block;
    }

http://jsfiddle.net/640kL55u/

因为它有display：none开头,所以其他样式一旦显示就没有被转换到dom：block被添加.

相反,您可以使用高度隐藏div,因此它仍然在页面上但不显示.然后在show div上添加高度.

JS Fiddle