从无显示更改为块时，过渡不起作用 [英] Transition not working when changing from display none to block

问题描述

我已经注意到，当元素也从 display none 更改为 block 过渡不起作用>.这是为什么?如果我删除了 display 属性，它就可以工作.

I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.

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中，一旦转换显示:已添加块.

Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.

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

Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.

JS小提琴

这篇关于从无显示更改为块时，过渡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！