忽略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;

的类

使用不透明度或可见性可以解决此问题。

Here's a JSFiddle example. Circle正在使用从display：block到display：none的转换，而Square正在使用不透明度。