🐞 bug报告

受影响的软件包

@angular/animation 或 @angular/platform-browser

是否为回归？

最近没有。

描述

如果有更清晰的标题，请重新命名；我不知道如何称呼这个，因为动画子元素似乎非常脆弱，具体情况各异。这只是一个例子，它只是因为父元素有一个动画触发器而崩溃。
<app2> 运行所有子动画(包括淡入和滑动),但 <app1> 只运行一个(淡入)。这两个组件之间的唯一区别是 <app1> 有 (无关的、未使用的)动画触发器。

🔬 最小复现

https://stackblitz.com/edit/angular-child-animation

import { Component, HostBinding, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { trigger, transition, query, animateChild, style, animate, group } from '@angular/animations';
;

@Component({
  selector: 'app',
  styles: [`
p {
color: white;
}
* {
display: block;
margin-bottom: 20px;
}
`],
  template: `
<p>Angular {{ version }}</p>
<app1></app1>
<app2></app2>
`,
})
export class AppComponent {
  @HostBinding('class.block') readonly block = true;

  show1 = true;
  show2 = true;
  readonly version = VERSION.full;
}

@Component({
  animations: [trigger('unused', [])], // causes slide-x to not happen
  selector: 'app1',
  styles: [`
* {
display: block;
margin-bottom: 20px;
}
`],
  template: `
<button (click)="show = !show">
{{ show ? 'Hide' : 'Show' }}
</button>
<app-parent *ngIf="show"></app-parent>
`,
})
export class App1Component {
  show = true;
}

@Component({
  selector: 'app2',
  styles: [`
* {
display: block;
margin-bottom: 20px;
}
`],
  template: `
<button (click)="show = !show">
{{ show ? 'Hide' : 'Show' }}
</button>
<app-parent *ngIf="show"></app-parent>
`,
})
export class App2Component {
  show = true;
}

@Component({
  animations: [
    trigger('fade', [
      transition(':enter', [
        style({ opacity: 0 }),
        group([
          animate(1000, style({ opacity: 1 })),
          query('@*', animateChild(), { optional: true }),
        ]),
      ]),
      transition(':leave', [
        style({ opacity: 1 }),
        group([
          animate(1000, style({ opacity: 0 })),
          query('@*', animateChild(), { optional: true }),
        ]),
      ]),
    ]),
  ],
  selector: 'app-parent',
  styles: [`
:host {
background: blue;
}
`],
  template: `
Parent (fade)
<app-child></app-child>
`,
})
export class ParentComponent {
  @HostBinding('class.block') readonly block = true;

  @HostBinding('@fade') readonly animate = true;
}

@Component({
  animations: [
    trigger('slide-x', [
      transition(':enter', [
        style({ transform: 'translateX(-200px)' }),
        group([
          animate(1000),
          query('@*', animateChild(), { optional: true }),
        ]),
      ]),
      transition(':leave',
        group([
          animate(1000, style({ transform: 'translateX(200px)' })),
          query('@*', animateChild(), { optional: true }),
        ]),
      ),
    ]),
  ],
  selector: 'app-child',
  styles: [`
:host {
background: yellow;
}
`],
  template: `
Child (slide-x)
`,
})
export class ChildComponent {
  @HostBinding('class.block') readonly block = true;

  @HostBinding('@slide-x') readonly animate = true;
}

@NgModule({
  declarations: [
    AppComponent,
    App1Component,
    App2Component,
    ChildComponent,
    ParentComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

🔥 异常或错误

无

🌍 你的环境

Angular 版本：

7.1.2

其他相关信息？

无