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

Question

我注意到,transition当元素也从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/

Answer 1

因为它必须display: none首先,其他样式不会被添加到dom中进行过渡display: block.

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

JS小提琴