* ngFor中的CSS动画类?

时间:2018-04-18 08:58:59

标签: css angular css-animations nativescript angular2-nativescript

(Angular 5.2,tns 4,纯CSS动画。)

一段时间后,我正在努力解决一个freezy / stucky UI问题。

我有一张4张图片的游戏,其中".breath"类只有动画scaleXscaleY - 无限。

在一些用户操作之后,我将这4个图像更改为另外4个图像 ..

它们通过*ngFor填充:

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

一切顺利。 (我确实看到了4个动画图像)。

但是如果我做一些导致数组重新填充的操作,那么UI就会变得很糟糕。 (最终冻结)。

我心想 - “也许当阵列重新填充时,旧的动画不会停止并继续某处,导致此问题?

所以我在重新填充之前添加了删除 .breath动画类的代码。 - 但是在那个时候,它变得粘稠和冻结。

但后来我想 - 并创建了一个测试 - 我用<{1}}手册ngFor 替换了 4(其中每个都有动画类) -

enter image description here

即使我做了很多(很多!!)操作,它也能顺利运行(!!!)。 所以我猜这个images的问题和带有动画类的旧图像在重新填充时没有处理(或类似的东西)

(顺便说一句 - 我已经添加了ngFor

问题:

处理"markingMode": "none"图像的正确方法是什么,每个图像都有动画类?

0 个答案:

没有答案