html - Angular 4 |过渡不适用于条件 css 类

Question

我已经在 stackoverflow 上搜索了一段时间，但我认为这个问题还没有得到解答。我在 div 上有一个条件类，当 bool 变量设置为 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，现在使用 visibility: hidden 和 visibility: visible。显示覆盖了过渡。

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