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属性不会改变），并且使用Google Chrome进行检查时，模态组件div将得到类“ng-animate-queued”。 以下是它的外观：


有人可以帮我解决问题或分享原因吗？ 谢谢！

- Eyal Rosenbaum

Answer 1

打开模态框时，请检查是否有任何角度控制台错误。

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

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

- dzulai

---

这只是一个评论性质的答案。 - Mathews Sunny

抱歉，我本来想直接对问题进行评论的，但你需要至少50点声望才能这样做。 - dzulai

Answer 2

将此内容发布在这里，为那些仍在与此问题或类似问题斗争的人提供帮助。

问题：

1. 您是否正在惰性加载声明动态组件的模块？
2. 您是否在该惰性加载的模块中导入了BrowserAnimationsModule和BrowserModule？

如果两者都是，则尝试删除这些导入。 可能是应用程序正在加载Browser/AnimationsModule两次，这应该会引发错误，但Angular“zone”无法检测到它们。

我刚刚解决了我的Angular12应用程序中实现微前端架构使用模块联邦的相同问题。托管在单独站点上的组件在主机站点上加载，但动画不起作用。我还看到了ng-animate-queue类。经过数天的无数试错之后，我尝试配置webpack共享@angular/platform-browser/animations库。然后它显示了这个错误，基本上告诉如何修复它：

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

因此，我从被惰性加载的远程模块中删除了BrowserAnimationsModule，然后它就可以工作了！

- CodeLinguist