Angular 4 动画未触发，“ng-animate-queued”类添加到元素

Question

我在项目中的模态组件上使用了角度动画（淡入、淡出）。
当单击不同组件上其他位置的按钮时，模态设置为打开（使用模态服务）。
承载模态组件的组件中的动画代码：

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'))
    ])]

和 html：

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

在我将模态内容设置为动态加载并插入模态组件（在模态的组件 html 中使用 ng-template）之前，此动画效果很好。

之后动画不再起作用（点击按钮时相关的 css 属性不会改变）并且模式组件 div 在使用谷歌浏览器检查时获得类“ng-animate-queued”。
这是它的外观：


谁能帮我解决这个问题，或者分享一下原因是什么？

谢谢！

Answer 1

打开模态时检查是否存在任何角度控制台错误。

我在有滑块动画的模态中遇到了同样的问题。问题间歇性发生。我终于注意到，一个单独的控制台错误也会间歇性地发生，并且当动画进入“ng-animate-queued”时同时发生。修复了控制台错误，不再出现动画错误。

--更新-- 这可能与此错误有关。 https://github.com/angular/angular/issues/19093