🐞 bug报告

受影响的软件包

@angular/animations

描述

假设我们有一个简单的动画：

trigger('fadeOut', [
      transition(':leave', [
        animate(
          '0.2s',
          style({
            height: 0,
            opacity: 0
          })
        )
      ])
    ])

以及这个HTML结构：

<div *ngFor="let item of items" [@fadeOut]> <!--- 10 items -->
      <div *ngIf="show">
          <div *ngFor="let subitem of item.subitems"  [@fadeOut]> <!-- 20 each, 200 total -->
                 {{subitem.name}}    
          </div>
     </div>
</div>

每当我将 show 设置为 false 时，重新渲染需要很长时间，应用程序在这段时间内会冻结。如果我删除第一个 fadeOut 动画，一切运行速度更快，只有在我删除最后一个动画时才能完美运行。
我研究了一段时间，发现问题出在调用函数 WebAnimationsDriver#computeStyle 上，如下图所示：

函数调用栈如下：

这个bug让我无法在列表中使用动画，我认为这是一个很大的问题。

🔬 最小复现

https://stackblitz.com/edit/angular-issue-repro2-kpusjq?file=src%2Fapp%2Fapp.component.ts

🌍 你的环境

Angular版本：

Angular CLI: 7.1.3
Node: 11.5.0
OS: linux x64
Angular: 7.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.3
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.3
@angular-devkit/schematics        7.1.3
@angular/cdk                      7.2.0
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.3
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1