CSS3过渡效果单向工作的问题

Question

我有一个 <div>，它根据条件有两个类中的一个 -

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

初始类将始终是 hidden，当 visible 替换该类时，使用 CSS3 过渡动画来动画显示 width、left 和 opacity 属性。

然而，当 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 and #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的值应该立即更改。但是，反过来height应该在延迟0.5秒后转换，以便其他动画完成。我已经想出了以下代码，但还不太行。

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

- David Gard

---

请将“transition”规则放在“.mobile #modal”上，而不是“.mobile #modal.visible”上。 - Sebastian Simon

过渡应该在默认情况下设置一次，看起来像是#modal这里 :）。否则，在每个规则上但是冗余。 - G-Cyrillus

谢谢您的建议，但那也不起作用。我还尝试过完全删除.mobile #modal.hidden（将属性放入.mobile #modal中），但也失败了。 - David Gard

我刚刚玩了一下你的CSS，得到了类似于Attempt 2的效果：https://jsfiddle.net/v2b5e9d3/ - Maximillian Laumeister

@MaximillianLaumeister - 谢谢，这很有帮助。我现在发现问题是我在.mobile #modal中缺少了height。然而，这引发了另一个问题；当.visible替换.hidden时，我必须立即将高度从0过渡到100％，但是当.hidden替换.visible时，再过渡0.5秒。我已经更新了我的问题以显示这一点，因为我现在无法使其工作。 - David Gard

啊，终于搞定了。不需要担心改变高度，它可以保持在100%。相反，我只是在.mobile #modal中添加了z-index: -1作为初始值，现在它按照要求工作了。感谢您的评论 :) - David Gard

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

- David Gard