Animation class in *ngFor?


#1

(Angular 5.2, tns 4 , pure CSS animation.)

I’m struggling with a freezy/stucky UI problem after a while.

I have a game with 4 images which have a ".breath" class which is nothing but animated scaleX and scaleY - infinitely.

After some user actions , I change those 4 images to another 4 images

they are populated via *ngFor :

<Image *ngFor="let o of options;let i = index"
               [class]="'breath'"
               [src]="'~/images/keys/'+o+'.png'"
               (tap)="onKeyTap2($event,o )">
 </Image>

It is all working smooth. ( and I do see 4 animated images).

But if I make some operations that causes the array to be repopulated , along the time , the UI become stucky. ( eventually freeze).

I thought to myself - “maybe when the array is re-populated , the old animations doesn’t stops and continue somewhere , causing this issue ?

So I’ve added a code that removes the .breath animation class before repopulate. - But still along the time , it becomes sticky and freeze.

But then I thought- and created a test - I’ve replaced ngFor with 4 manual images ( where each also have the animated class) -

And it works smoothly (!!!) even if I make many many(many!!) operations .
So I guess that the problem with ngFor and old images with animation classes that are not disposed when repopulate ( or something like that)

(BTW - i’ve already added the "markingMode": "none")

Question:

What is the right way of dealing with *ngFor images , where each have animation class ?