Javascript 角度4动画交错的行为与预期不符

我试图实现的是错开每个点的上下跳跃动画，但它的行为并不像我预期的那样，我不确定我在这里做错了什么

@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);
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
`,
动画：[
触发器（'跳'[
状态（'up'，样式（{transform:'translateY（-20px）}）），
状态（'down'，样式（{transform:'translateY（0px）}）），
过渡（'：输入，向下向上'，
查询（'.dot'，交错（200，动画（'300ms 300ms线性'）））
])
]
})
导出类应用程序{
跳跃=‘向下’；
构造函数（）{
}
onJumpDone（事件：AnimationEvent）{
this.jump='down'；
//无限地上下跳跃
如果（event.toState==='down'）
setTimeout（（）=>this.jump='up'，0）；
}
}