使用*ngFor索引计算动画延迟

Use *ngFor index to calculate animation delay

似乎是 问题的重复,但实际上我试图影响 animation-delay 属性,而不是动画时间本身。

我有一个 Angular 模板,它通过循环创建列表项:

<div class="list-item" *ngFor="let item of items; let i = index" [attr.data-index]="i" style="animation-delay: {{ (i) + 's' }}"></div>

如您所见,我已经有了索引,并希望用它来增加每个元素的动画延迟。但是当我在 chrome 中测试时,甚至没有计算样式 属性,即使正确应用了索引属性。我在 CSS 中指定的动画效果很好,但没有应用延迟:

.list-item {
  animation: appear 0.3s ease-out forwards;
}

@keyframes appear
{
  0%
  {
    top: 550px;
    opacity: 0;
  }
  10%
  {
    opacity: 1;
  }
  100%
  {
    top: 30px;
    opacity: 1;
  }
}

尝试使用 ngStyle 指令:

[ngStyle]="{'animation-delay': i + 's'}"

希望效果很好,如果效果不好,请在 stackblitz 上分享一个工作示例