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

【问题标题】：Use *ngFor index to calculate animation delay使用 *ngFor 索引计算动画延迟
【发布时间】：2019-02-10 13:09:30
【问题描述】：

似乎与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 属性，也不会计算 style 属性。我在 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;
  }
}

【问题讨论】：

你能分享一下stackblitz的工作示例吗
@DanishArora 我们称之为minimal reproducible example。使用[mcve] 作为快捷方式;)
@aloisdg 感谢您的建议！！

标签： css angular angular5 ngfor

【解决方案1】：

尝试使用 ngStyle 指令：

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

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

【讨论】：