使用* ngFor index计算动画延迟

Question

似乎是this问题的重复，但实际上我试图影响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中测试时，即使正确应用了index属性，也不会计算样式属性。我在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;
  }
}

Answer 1

尝试使用ngStyle指令：

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

希望运行良好，如果没有，请在stackblitz上分享一个工作示例