(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
scaleY - infinitely.
After some user actions , I change those 4 images to another 4 images…
they are populated via
<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
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
What is the right way of dealing with
*ngFor images , where each have animation class ?