进一步的attemtps

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

进一步的attemtps

我现在发现最初缺少height是个问题。下面的代码仍然只能单向运行。

我需要什么 -

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

从.hidden转换为.visible时，height的vaule应立即更改。但是，另一种方式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.5s）时，.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过渡工作单向但不是另一种方式

进一步的attemtps

1 个答案: