【问题标题】：CSS3 transition working one way but not the otherCSS3过渡以一种方式工作，但不是另一种
【发布时间】：2015-09-01 19:30:25
【问题描述】：

我有一个<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;
}

【问题讨论】：

尝试将transition 规则放在.mobile #modal 而不是.mobile #modal.visible。
transition 应该在默认值上设置一次，看起来就像这里的#modal :)。除了 redondant 之外的每条规则都有 else
感谢您的建议，但这也不起作用。我也尝试过完全删除.mobile #modal.hidden（将属性放入.mobile #modal），但也失败了。
我刚刚玩弄了你的 CSS，得到了类似于 Attempt 2 的东西：jsfiddle.net/v2b5e9d3
@MaximillianLaumeister - 谢谢，这有帮助。我现在发现这个问题是我从.mobile #modal 中丢失了height。但是，这引发了另一个问题；当.visible 替换.hidden 时，我必须立即将0 的高度转换为100%，但是当.hidden 替换.visible 时，然后在0.5s 之后转换。我已经更新了我的问题以显示这一点，因为我现在无法让它工作。

标签： css css-transitions

【解决方案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;
}

【讨论】：