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

Question

I have used an angular animation (fade-in, fade-out) on a modal component in my project.
The modal is set to open when clicking on a button somewhere else on a different component (using a modal service).
The animation code in the component which hosts the 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 the html:

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

This animation worked perfectly until I've set the modal content to be loaded and inserted into the modal component dynamically (using ng-template in the modal's component html).

After that the animation no longer works (the relevant css properties don't change when clicking on the button) and the modal components div gets the class "ng-animate-queued" when inspected using Google Chrome.
This is how it looks:


Can anyone help me solve the problem, or share what is the cause?

Thanks!

Answer 1

Check if there are any angular console errors when you open your modal.

I encountered the same issue in my modal where there is a slider animation. Issue happens intermittently. I finally able to notice that a separate console error also happens intermittently, and it happens the same time when the animation goes "ng-animate-queued". Fixed the console error and the animation error did not occur anymore.

--Update-- This might be related to this bug. https://github.com/angular/angular/issues/19093