Html CSS转换被忽略

我正在尝试向

添加一些CSS转换，但似乎无法使其正常工作

基本上，我有一个滑入的侧边栏（使用一个过渡itslef，它工作得很好），当这种情况发生时，我会在页面的其余部分前面放置一个

我试图使用转换，因为我希望前面提到的

看起来好像总是附加到侧边栏上，但它只是显示在它的最终位置

我有什么遗漏吗

#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

。

css转换不能应用于从

显示：块转换的类至<代码>显示：无

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

圆使用的是从“显示：块”到“显示：无”的过渡，而正方形使用的是不透明度。
是否将过渡添加到了错误的元素？您没有发布足够的代码，但似乎您已将转换添加到元素中，它在结尾应该是什么样子，但它应该添加到#model中，从那里开始整个转换。您不能对从display:none到display:block的类进行转换。因为none/block与true/false相似，并且不能在这两种状态之间转换，所以我以前就有过这个问题。但是我试着用javascript设置转换，它成功了。。。IDKC你能把它放进JSFIDLE吗？@MathiasaurusRex-宾果！我将其替换为
可见性：隐藏和
可见性：可见和转换工作。请将此作为回答，我很乐意接受。谢谢。是的，我在这上面撞了一会儿。你帮了我。