Angular 每个元素的角度独立动画

我写了这段代码，但它将组件中的所有对象作为一个组一起设置动画，但我想在*ngFor中一个接一个地设置所有元素的动画，先开始显示，然后在1秒后显示，等等

角度版本：4.2.5

这是我的密码：

组件中：

<div *ngFor="let item of posts; index as i" class="col-lg-4" [@flyInOut]>
    <img class="rounded-circle" src="{{featuredmedias[i]}}" alt="Generic placeholder image" width="160" height="160">
    <h2>{{item.title.rendered}}</h2>
    <p>{{item.excerpt.rendered | removeParagrapHtmlTags}}</p>
    <p><a class="btn btn-secondary" routerLink="\{{item.slug}}" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->

animations: [
trigger('flyInOut', [
  transition('void => *', [
    style({transform: 'translateY(100%)'}),
    animate('0.9s ease-in')
  ])
])

---

]试着一个接一个地添加它们，而不是一次添加

组件中

public index: number = 0;

constructor() {
   this.addNext();
}

addNext() {
  if(this.index < this.posts.length) {
     this.showPosts = this.showPosts.concat([this.posts[this.index++]]);
  }
}

公共索引：编号=0；
构造函数（）{
this.addNext（）；
}
addNext（）{
if（this.index

HTML

---

根据以下文档，您应该在动画DSL中使用交错功能：

这是来自文档，因此不希望答案是独立的

在下面的示例中，有一个container元素，它包装了由ngFor打印的项目列表。容器元素包含一个动画触发器，该触发器稍后将被设置为查询每个内部项

<!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
</div>

实际动画代码

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

import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
@Component({
  templateUrl: 'list.component.html',
  animations: [
    trigger('listAnimation', [
       //...
    ])
  ]
})
class ListComponent {
  items = [];

  showItems() {
    this.items = [0,1,2,3,4];
  }

  hideItems() {
    this.items = [];
  }

  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
  }
}

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