Angular оставить анимацию по ширине

Question

У меня есть следующая анимация, которая полностью работает для :enter, но для :leave работает только непрозрачность. Почему-то не анимируется ширина. Что я делаю не так? Есть ли лучший способ анимировать уменьшение ширины элемента до 0?

const visitStagger = trigger('visitStagger', [
  transition('* <=> *', [
    query(
      ':enter',
      [
        style({ opacity: 0, transform: 'translateX(25px)' }),
        stagger(
          '100ms',
          animate(
            '550ms ease-out',
            style({ opacity: 1, transform: 'translateX(0px)' })
          )
        )
      ],
      { optional: true }
    ),
    query(':leave',
      [
        style({opacity: 1, width: 300}),
        animate('5000ms', style({ width: 10, opacity: 0 }))
      ], {
        optional: true
      }
    )
  ])
])

Вот как это реализовано:

<ion-row onscroll="scroll($event)" class="ion-nowrap" id="weigh-in-table" [@visitStagger]='(checkInsProvider.check_ins$ | async)?.length'>
  <ion-col class="ion-no-padding" *ngFor="let check_in of checkInsProvider.check_ins$ | async; let i = index">
    <weigh-in
      [check_in]="check_in"
      [weigh_in]="check_in.weigh_in"
      [repositioning]="check_in.repositioning"
      [showComments]="showComments"
      [isManager]="globals.isCurrentUserManager()"
      (validate)="editCheckIn()"
      (callback)="receiveCallback($event)"
    ></weigh-in>
    {{check_in | json }}
  </ion-col>
  <ion-col id="special"></ion-col>
</ion-row>