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>

---

CSS for #modal.hidden和#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;
}

---

进一步的attemtps

我现在发现最初的遗漏height是问题所在.下面的代码仍然只能单向运行.

我需要的 -

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

从过渡.hidden到.visiblevaule 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;
}

Answer 1

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

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

当过渡从 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;
}