Анимация списка ануглара не ошеломляет, как ожидалось

Question

У меня есть список, который я пытаюсь анимировать с помощью Stagger, но кажется, что Stagger не применяется. Вот шаблон родительского компонента:

  <ion-list class="awaken-striped" [@listAnimation]="( clientService.searchResult$ | async ).length">
    <client-index-row
      *ngFor="let client of clientService.searchResult$ | async"
      [client]="client"
      [isSearching]="true"
      (selectClient)="loadClient($event)"
    ></client-index-row>
  </ion-list>

Вот шаблон дочернего компонента, client-index-row, компонента:

<ion-item-sliding class="shaded-slider animateMe">
  ...
</ion-item>

Поэтому, когда он рендерит, он загружается как:

| ion-list
|---| client-index-row
|---|---| ion-item-sliding
...
|---| client-index-row
|---|---| ion-item-sliding

А моя анимация:

const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(':enter',
      [
        query('ion-item-sliding', [
          style({opacity: 0, marginLeft: "200px"}),
          stagger("70ms", animate("600ms ease-out", style({opacity: 1, marginLeft: "0px"})))
        ])
      ],
      { optional: true }
    ),
    query(':leave',
      animate('200ms', style({ opacity: 0 })),
      { optional: true}
    )
  ])
]);

Я использовал эту анимацию с другими асинхронными данными, и она работала нормально, поэтому я не уверен, почему используются элементы ion-item-sliding анимированные как группа.