CSS转换被忽略

Question

我试图添加一些CSS过渡到<div>，但我似乎不能让它工作。

基本上，我有一个侧边栏滑动(使用过渡本身，这工作得很好)，当这种情况发生时，我在页面的其余部分前面放置一个<div>。

我试图使用过渡，因为我想要前面提到的<div>出现，虽然它总是附加到侧边栏，但它只是显示在它的最终位置。

我在这里错过了什么吗?

#modal{
    display:    none;
    left:       0;
    opacity:    0;
    width:      100%;
}
.mobile #modal.sidebarVisible{
    background-color:   #000000;
    display:            block;
    height:             100%;
    left:               271px;
    opacity:            0.5;
    position:           absolute;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
    -webkit-transition: left 5s linear, width 5s linear;
    transition:         left 5s linear, width 5s linear;
}

*请注意，我只使用5s的过渡，以测试它的工作，它将是0.3s在现实中。

Answer 1

不能将css过渡应用于从display: block;过渡到display: none;的类

使用不透明或可见性可以解决这个问题。

下面是一个JSFiddle示例。圆圈使用了从display: block到display: none的过渡，正方形使用了不透明度