How to increment the duration of a css animation in ngFor loop with ngStyle attribute

Question

I'd like to know if there is way to do this. I'm trying to increment the duration of a css animation. I couldn't find the right syntax to make it. Thanks !

      <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 is not doing it right because it is in a `string` format. Have you tried like: `'animation': 'appear ease ' + i * 100 + ' ms'` — Jorge Mussato, Dec 06 '19 at 02:12
Yes but still it's not working, I don't have any error but the page infinite loads — guilhc, Dec 07 '19 at 14:01

score 0 · Answer 1 · answered Dec 07 '19 at 14:46

0

Ok just found it, working like this :

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

answered Dec 07 '19 at 14:46

guilhc

1

How to increment the duration of a css animation in ngFor loop with ngStyle attribute

1 Answers1