CSS3 过渡以一种方式工作，但不能以另一种方式工作

Question

我有一个 <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 的 CSS和 #madal.visible

.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 的值(value)应该立即改变。然而，走另一条路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;
}

Answer 1

根据 @MaximillianLaumeister 发表的评论，我确定问题是没有定义初始高度值。

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

随着过渡从 99 变为 -1(在 0.5 秒内)，.mobile #modal 在整个过渡过程中基本上可见，仅在结束前约 0.005 秒消失在其他内容后面)。

.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;
}