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

Question

我在项目中的模态组件上使用了 Angular 动画(淡入、淡出)。
当单击不同组件上其他地方的按钮时(使用模态服务)，模态设置为打开。
承载模态组件的组件中的动画代码:

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

打开模态框时检查是否有 Angular 控制台错误。

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

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