CSS3过渡以一种方式起作用，但不是另一种方式

我有一个<div>，它的条件是具有两个类之一-

ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}"

初始类将始终为hidden，当visible替换该类时，width，left和opacity属性均使用CSS3过渡进行动画处理。
但是，当hidden类替换visible时，动画不会反转，而是立即将所有三个属性的新值切换为立即。
我尝试将transition属性添加到.visible和.hidden的样式中，以及分别添加到每种样式中，但是在所有情况下，只有visible动画有效。
我在这里做错了什么？

相关HTML

<div id="modal" data-ng-if="isMobile"
                data-ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}">
</div>

用于#modal.hidden和#madal.visible的CSS

.mobile #modal{
    position:   absolute;
}
.mobile #modal.hidden{
    left:       0;
    opacity:    0;
    width:      100%;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
    -webkit-transition: all 0.5s ease-in-out;
    transition:         all 0.5s ease-in-out;
}

进一步的尝试
现在，我发现最初缺少的height是问题所在。下面的代码仍然只能以一种方式工作。
我需要的 -

.mobile #modal.hidden  { height: 0; }
.mobile #modal.visible { height: 100%; }

从.hidden转换为.visible时，height的有效值应立即更改。但是，通过另一种方式height应该在0.5s延迟之后过渡，以允许其他动画完成。我想出了下面的代码，但仍然不够。

.mobile #modal{
    left:               0;
    opacity:            0;
    position:           absolute;
    width:              100%;
    -webkit-transition: left 0.5s ease-in-out,
                        opacity 0.5s ease-in-out,
                        width 0.5s ease-in-out;
    transition:         left 0.5s ease-in-out,
                        opacity 0.5s ease-in-out,
                        width 0.5s ease-in-out;
}
.mobile #modal.hidden{
    height:             0;
    -webkit-transition: height 0 ease-in-out 0.5s;
    transition:         height 0 ease-in-out 0.5s;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
}

最佳答案

在 @MaximillianLaumeister 发表的评论的指导下，我确定问题是未定义初始高度值。

然后，我也尝试转换该值，但最终解决方案是通过设置#modal来简单地“隐藏” z-index: -1;。

当过渡从99变为-1(0.5秒)时，.mobile #modal在整个过渡中基本可见，仅在结束前约0.005s的其他内容之后消失。

.mobile #modal{
    height:             100%;
    left:               0;
    opacity:            0;
    position:           absolute;
    width:              100%;
    -webkit-transition: all 0.5s ease-in-out;
    transition:         all 0.5s ease-in-out;
    z-index:            -1;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
}

关于CSS3过渡以一种方式起作用，但不是另一种方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32290082/