Repository: angular
Issue: Angular inconsistently animates children
Labels: type: bug/fix,area: animations,freq1: low,P4

# 🐞 bug report

### Affected Package

@angular/animation or @angular/platform-browser

### Is this a regression?

Not recently.

### Description

Please retitle this if there is something clearer; I don't know what to call this as animating child elements seems extremely fragile and situation-specific. This is one example of it breaking, simply because the parent has an animation trigger.

`<app2>` runs all child animations (both fade and slide), but `<app1>` only runs one (fade). The only difference between the two components is that `<app1>` has a (unrelated, unused) animation trigger.

## 🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-child-animation

```typescript
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 { }
```

## 🔥 Exception or Error

N/A

## 🌍  Your Environment

**Angular Version:**

7.1.2

**Anything else relevant?**

N/A