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

Question

I've been searching stackoverflow for a while now and I don't think this has been answered yet. I Have a conditional class on a div that gets added to the div when a boolean variable is set to true. Following code:

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

    [...]

</div>

When the user clicks a button the variable is set to true and the class modalwindow-show gets added to the div. My problem is that out of some reason the css transition is not working, the background just changes without a transition. I have these two classes:

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

Does anyone know why the transition is not working?

Answer 1

Fixed!

I entirely removed display: none and display: block and am now using visibility: hidden and visibility: visible. display was overriding the transition.

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