Angular 角度4动画未触发，“；ng动画排队“；类添加到元素中

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

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模板）之前，此动画工作正常。

之后，动画不再工作（单击按钮时相关css属性不会更改），模态组件div获得类使用Google Chrome检查时，“ng animate queued”。
这就是它的外观：


谁能帮我解决这个问题，或者告诉我原因是什么？

---

谢谢！

打开modal时，检查是否存在角度控制台错误

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

--更新-- 这可能与此错误有关。

---

这只是一个评论质量ANSSR。对不起，我想直接对问题发表评论，但你需要至少有50的声誉才能这样做。