Add animation query() functionality

@Component({
    selector: 'app',
    styleUrls: ['app.css'],
    template: `
<button (click)="exp=!exp">Go</button>
<div class="trigger" [@container]="exp" *ngIf="exp">
  <header #header [@header]="exp ? 'true' : 'false'">header</header>

  <div #body>body</div>

  <footer #footer>footer</footer>
</div>
    `,
    styles: [`
      .trigger {
        display:block;
        padding:1em;
        border:10px solid #888;
      }
      .item {
        width:100px;
        line-height:100px;
        font-size:60px;
        border:10px solid black;
        display:inline-block;
        margin:10px;
        text-align:center;
      }
    `],
    animations: [
        trigger('header', [
          state('true', style({ backgroundColor: 'red' })),
          state('false', style({ backgroundColor: 'blue' })),
          transition('* => *', animate(2000))
        ]),
        trigger('container', [
          state('*', style({ opacity: 1 })),
          state('void', style({ opacity: 0 })),
          transition(':enter', group([
            query('footer', [
              style({ opacity: 0 })
              animate(2000, style({ opacity: 1 }))
            ]),
            query('header', animateChild()),
            query('body', [
              style({ opacity: 0 })
              animate(2000, style({ opacity: 1 }))
            ])
          ])),
          transition(':leave', [
            animate(500)
          ])
        ])
    ]
})
export class App {
  public exp = false;
}

[matsko]

This will be a new method call to stagger(delay, animation). This way it’s easier to handle preparation styles (which site outside of where stagger() is used).

query('li', [
  style({ opacity: 0 }),
  stagger(200, [ // or -200 to animate things in reverse
    animate(600, style({opacity: 1}))
  ])
])

Once query is in place then having basic staggering support is a super tiny feature to add so it will likely go in within the same release.

[matsko]

It’s getting close: https://github.com/angular/angular/pull/15574