Angular 4 animation does not start, class "ng-animate-queued" added to element added

Question

I used angular animation (fade-in, fade-out) for the modal component in my project.
The modal value is set to open when you click on the button in another place on another component (using the modal service).
Animation code in a component that contains a modal component:

animations: [
    trigger('modalVisibilityChanged', [
      state(
       'shown',
        style({
          opacity: 1,
          visibility: 'visible'
        })
      ),
      state(
        'hidden',
         style({
          opacity: 0,
          visibility: 'hidden'
        })
      ),
      transition('shown => hidden', animate('500ms ease-in')),
      transition('hidden => shown', animate('500ms ease-out'))
    ])]

And html:

<app-modal [@modalVisibilityChanged]="visibility"></app-modal>

, ( ng- html).

( css ), div "ng-animate-queued" Google Chrome.
:


- , ?

!

Answer 1

, - angular .

, . . , , , , "ng-animate-queued". ​​ , .

- Update-- . https://github.com/angular/angular/issues/19093