Angular animation. Why is there a sharp instantaneous change in height, and not a smooth one?

Question

Angular

Hey! Weak in Angular and JS. I can not understand why there is a sharp change in the height of the cell in the table. When you click on a line, the angular animation is animated. I change the height of the cell and the display property. The pitch changes, but without a smooth transition. It just opens and closes abruptly) But you need to smoothly :)
Thank you :)

animations: [
    trigger('rowVisibleState',
      [
        state('false',
          style({
            height: '0px',
            display: 'none'
          })),
        state('true',
          style({
            height: 'auto',
            display: 'table-cell'
          })),
        transition('0 <=> 1', [
          animate('1000ms ease-in')
        ])
      ]
    )
  ]

Answer 1

Can't animate div height from value to auto, must be two values

Answer 2

You can change the height to auto, only in a different way.
Here is the version that works for me.

state('hidden', style({height: '0px'})),
state('visible', style({height: '*'})),
transition('* => *', animate('255ms ease'))