有没有办法在 Angular 中由 ngFor 生成的所有项目分别使用相同的动画？

Question

所以我有一个 div 元素，我用 ngFor 循环它，并且对于每个元素我都有一些动画工作。

我遇到的问题是动画同时作用于所有元素，我希望它一次作用于一个项目。谁能帮我解决这个问题？

<div *ngFor="let product of products" @fadeIn>
    Something in here...</div>

Answer 1

如果你想在下一个元素动画之前添加延迟，你可以使用 stagger method

您的代码变为：

HTML

<div [@fadeIn]="products.length">
  <div *ngFor="let product of products">
    Something in here...
  </div>
</div>

TS

trigger('fadeIn', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])

有没有办法在 Angular 中由 ngFor 生成的所有项目分别使用相同的动画？

Is there a way to separately use the same animation on all the items generated by ngFor in Angular?

angular

angular-animations