如何使用 ngStyle 属性在 ngFor 循环中增加 CSS 动画的持续时间答案

【问题标题】：How to increment the duration of a css animation in ngFor loop with ngStyle attribute如何使用 ngStyle 属性在 ngFor 循环中增加 CSS 动画的持续时间
【发布时间】：2020-03-30 22:17:54
【问题描述】：

我想知道是否有办法做到这一点。我正在尝试增加 CSS 动画的持续时间。我找不到正确的语法来制作它。谢谢！

      <app-product *ngFor="let vetement of vetements; let i = index"

        [ngStyle]="{ 'animation': 'appear ease i*100 ms '}"

            title="{{vetement.title}}" 
             type="{{vetement.type}}" 
      description="{{vetement.description}}"
            price="{{vetement.price}}" 
         imageURL={{vetement.image}}>
  </app-product>

【问题讨论】：

你尝试过动画持续时间吗？
i*100ms 做得不对，因为它是string 格式。你试过像：'animation': 'appear ease ' + i * 100 + ' ms'
是的，但它仍然无法正常工作，我没有任何错误，但页面无限加载

标签： angular css-animations ng-style

【解决方案1】：

好的，刚刚找到它，像这样工作：

 [ngStyle]="{ 'animation-duration' :  (i*100) + 'ms'}"

【讨论】：