Animation using query and stagger doesn't properly animate from height: '*'

[brianmtreese]

🐞 bug report

Affected Package

@angular/animations: 8.1.1

Is this a regression?

I'm not sure.

Description

When attempting to use an animation query with a stagger to animate from an unknown height height: '*', the animation does not work. It works fine when animating from a known height to an unknown height though.

For example, this works correctly:

animations: [
    trigger('expandCollapse', [
      transition('false => true', [
        query('.category', [
          style({ height: 0 })
        ]),
        query('.category', stagger('150ms', [
          animate(
              '600ms cubic-bezier(0.25, 0.8, 0.25, 1)',
              style({ height: '*' })
          )
        ]), { optional: true })
      ])
    ])

But this does not:

animations: [
    trigger('expandCollapse', [
      transition('true => false', [
        query('.category', stagger('-150ms', [
          style({ height: '*' }),
          animate(
              '600ms cubic-bezier(0.25, 0.8, 0.25, 1)',
              style({ height: 0 })
          )
        ]), { optional: true })
      ])
    ])

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-unknown-height-query-animation-bug?file=src/app/app.component.ts

In this example, if you click the "show" button you will see it animate to an unknown height just fine. But, once it's expanded and you click the "hide" button you will see that it doesn't properly animate from an unknown height back to zero.