Angular2级联动画

Question

我正在尝试为元素列表实现级联动画。

我成功应用了状态触发器 - 感谢documentation - 但是所有元素状态都在同一时间应用而不是级联。

我的动画：

预期结果：

heroes.component.ts

trigger('flyInOut', [
  state('in', style({
    transform: 'translateX(0)'
  })),
  transition('void => in', [
    style({transform: 'translateX(-100px)'}),
    animate(500)
  ]),
  transition('* => void', [
    style({transform: 'translateX(0)'}),
    animate(500)
  ])
])

heroes.component.html

<li *ngFor="let hero of heroes" 
    (click)="onSelect(hero)"
    [class.selected]="hero === selectedHero"
    @heroState="hero === selectedHero ? 'active' : 'inactive'"
    @flyInOut="'in'"
    >
  <span class="badge">{{hero.id}}</span> {{hero.name}}
  <button class="delete" (click)="delete(hero); $event.stopPropagation()">
    x
  </button>
</li>

Answer 1

你想要的是https://angular.io/api/animations/stagger。

基本上，您将动画应用于列表容器（在您的情况下为<ol>？），该容器绑定到列表的长度（或列表更改时更改的任何其他内容）。然后查询列表中的输入/离开元素，并使用交错函数以级联方式应用动画。

如链接文档中所示，但经过修改以获得您想要的效果（我可以从gif中看到）：

transition('* => *', [ // each time the binding value changes
  query(':leave', [
    stagger(100, [
      animate('0.5s', style({ left: 100 }))
    ])
  ]),
  query(':enter', [
    style({ left: -100 }),
    stagger(100, [
      animate('0.5s', style({ left: 0 }))
    ])
  ])
])