Angular2 Animation - Animate opacity, but not display-attribute

I want to show and hide my modal component with Angular2 animations. At the moment this is my code:

animations: [
trigger('modalState', [
state('true', style({
display: 'block',
opacity: '1'
})),
state('false', style({
display: 'none',
opacity: '0'
})),
transition('* => *', animate('200ms ease'))
])
]


The problem: At the moment the display block is set after 200ms. So you can't see the animated opacity. The display should be set directly after event.

How to do this?

Continue reading...