Angular animation. Почему происходит резкое моментальное изменение высоты, а не плавное?

Привет! В ангуляре и в JS слаб. Не могу понять почему происходит резкое изменение высоты ячейки в таблице. При клике на строку анимируется ангуляр анимацией. Изменяю высоту ячейки и свойство display. Высота меняется, но без плавного перехода. Просто резко открывается и закрывается) А нужно плавно :)
Спасибо :)

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')
        ])
      ]
    )
  ]