After scouring through stackoverflow, I have yet to find a solution to my current issue. I am utilizing a conditional class on a div that is applied when a boolean variable becomes true. Below is the code snippet in question:
<div [class.modalwindow-show]="modalState" class="modals">
[...]
</div>
Upon clicking a button, the boolean variable switches to true and the modalwindow-show class is added to the div. However, I have encountered an issue where the CSS transition does not seem to work as expected - the background changes without a smooth transition. The two relevant classes are defined as follows:
.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;
}
If anyone has insights into why the transition may not be working properly, please share your knowledge.