CSS 转换被忽略

Question

我正在尝试将一些 CSS 转换添加到 <div>，但我似乎无法让它工作。

基本上，我有一个侧边栏可以滑入（使用过渡 itslef，效果很好），当发生这种情况时，我会在页面其余部分的前面放置一个 <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;

的 class

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

Here's a JSFiddle example. 圆形使用从显示：块到显示：none 的过渡，方形使用不透明度。

CSS 转换被忽略

CSS transition being ignored

html

css

css-transitions