Angular 4动画交错表现不如预期

Question

Here is the link to the plunker

我想要实现的是错开每个点的上下跳动动画，但它不像我期望的那样表现，我不确定我在这里做错了什么。

@Component({
  selector: 'my-app',
  template: `
    <div class="spinner">
      <div class="backdrop"></div>
      <div
        class="dots"
        [@jump]='jump'
        (@jump.done)='onJumpDone($event)'>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
    </div>
  `,
  animations: [
    trigger('jump', [
      state('up', style({ transform: 'translateY(-20px)' })),
      state('down', style({ transform: 'translateY(0px)' })),
      transition(':enter, down <=> up',
        query('.dot', stagger(200, animate('300ms 300ms linear'))))
    ])
  ]
})
export class App {
  jump = 'down';
  constructor() {
  }
  onJumpDone(event: AnimationEvent) {
    this.jump = 'down';
    // Jump up and down infinitely
    if (event.toState === 'down')
      setTimeout(() => this.jump = 'up', 0);
  }
}