Angular transition animation between states only animating correctly for one state

Question

I am trying to add expandable rows to an angular material table, so I found an example. I modified the example by upgrading the angular versions to ^7.0.0, and suddenly the animation has stopped working when transitioning from 'collapsed' to 'expanded'. Here is a stackblitz demonstrating the problem. If you click on a row to expand it, after a short delay the row instantly expands. Then if you click the row again to collapse it, the animation works correctly. How can I fix the animation so that expanding the row animates correctly?

Answer 1

Just keep the animation to the height

  state('expanded', style({height: '*'})),
  state('collapsed', style({height: '0px'})),

the display: 'none'} looks bugged.

https://stackblitz.com/edit/angular-lb7n8q-ldwsld?file=app/table-expandable-rows-example.ts