css - 从显示无更改为阻止时转换不起作用

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 开头，所以一旦添加了 display: block，其他样式就不会被带入要转换的 dom 中。

相反，您可以隐藏具有高度的 div，因此它仍然在页面上但不显示。然后在 show div 上添加高度。

JS Fiddle