角度4 | 转换不适用于条件CSS类

Question

我一直在搜索stackoverflow已有一段时间了，但我认为这还没有得到解决。 我在div上有一个条件类，当将布尔变量设置为true时，该条件类会添加到div中。 以下代码：

<div [class.modalwindow-show]="modalState" class="modals">

    [...]

</div>

当用户单击按钮时，变量将设置为true，并且将modalwindow-show类添加到div中。 我的问题是，出于某些原因，css过渡无法正常工作，背景只是在没有过渡的情况下发生了变化。 我有这两节课：

.modals{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: all .30s ease-in-out;
}

.modalwindow-show{
    background: rgba(10,10,10,0.5);
    display: block;
}

有谁知道为什么过渡不起作用？

Answer 1

固定！

我完全删除了display：none和display：block，现在正在使用可视性：隐藏和可视性：可见。 显示覆盖了过渡。

.modals{
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: all .30s ease-in-out;
}

.modalwindow-show{
    visibility: visible;
    background: rgba(10,10,10,0.5);
}