Angular4 - 如何错开可观察数组的动画

Question

我试图在Angular4中的一个observable数组上做一个交错的动画，这是我的代码：

  animations: [
    trigger('fade', [
      transition(':enter', [style({opacity: 0}), animate('2s ease')])
    ]),
    trigger('stagger', [
      transition(':enter', [
        query(
          ':enter', 
          stagger(
            '0.5s', 
            [animateChild()]
          ),
          { optional: true }
        )
      ])
    ])
  ], 

export class TimetablePage {
  classes: Observable<ClassTime[]>;

我的模板：

  <ion-list [@stagger]>
    <timetable-item 
    *ngFor="let class of classes | async | sort: 'time'" 
    [class]="class"
    [@fade]>
    </timetable-item>
  </ion-list>

淡入淡出动画正在运行，但动画并未交错。