涉及宽度的角假动画

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>