angular - Angular2级联动画

Question

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

由于文档，我成功应用了状态触发器，但是所有元素状态都是同时应用的，而不是级联的。

我的动画：

预期结果：

hero.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)
  ])
])

hero.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>在您的情况下？），它绑定到列表的长度（或列表更改时更改的任何其他内容）。然后查询列表中的进入/离开元素，并使用 stagger 函数以级联方式应用动画。

如链接的文档中所示，但经过修改以获得您想要的效果（从我可以从 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 }))
    ])
  ])
])