如何为Angular *ngFor生成的不定数量元素设置可变CSS动画延迟

实现方案 #

你可以直接通过 Angular *ngFor 暴露的索引变量 + 内联样式绑定实现，无需预定义数量的伪类规则，适配任意长度的 services 数组： #

步骤1：调整CSS代码

保留动画基础配置，移除固定的延迟位定义：

.slide-top {
  animation: slide-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-60px);
  }
}

步骤2：修改Angular模板代码

在*ngFor中获取当前循环索引，通过样式绑定动态计算animation-delay值：

<div *ngFor="let service of services; let i = index" 
     class="slide-top"
     [style.animation-delay]="i * 100 + 'ms'">
  <div class="services">
    <h4>{{service.title | translate}}</h4>
    <p>{{service.description | translate}}</p>
  </div>
</div>

实现说明

*ngFor 循环生成元素时会自动生成从0开始的索引i，每个元素的动画延迟会按索引*100ms自动递增，第一个元素延迟为0ms、第二个为100ms，完全匹配需求，不受services数组长度变化影响。

内容的提问来源于stack exchange，提问作者Mohamed Karkotly