Angular 4 |转换不适用于有条件的CSS类

Question

我一直在搜索一段时间的stackoverflow，我不认为这已被回答。我有一个div上的条件类，当布尔变量设置为true时，它会被添加到div中。下面的代码：

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

    [...] 

</div> 

当用户点击一个按钮，该变量设置为true和类modalwindow秀被添加到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); 
}