Angular.js: ng-if verhält sich bei CSS-Animationen mit unendlichen Keyframes seltsam

Das Problem ist, dass ngAnimate denkt, dass Ihre unendliche Animation für alle verwendeten Animationsereignisse (wie enter, verlassen usw.) vorhanden ist. Und da es sich um eine unendliche Animation handelt, werden die CSS-Ereignisse nie ausgelöst, bis der letzte Countdown abgelaufen ist, der nach 7,5 Sekunden (5 x 1,5 == 7,5) abgelaufen ist.

Sie müssen ng-animate anweisen, die unendliche Hintergrundanimation nicht zu animieren, indem Sie die CSS-Klasse .ng-animate des Elements überschreiben und die Keyframe-Animationen löschen.

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ?p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

Leider ist die Erkennung von Stilen und CSS-Klassen in JavaScript stark eingeschränkt. Bei früheren Versionen von AngularJS hatten wir die Regel, dass Sie die CSS-Animation/Übergang nur in der Animationseigenschaft definieren können (wie .ng-enter, .ng-leave usw.), aber das hat mehr Probleme verursacht als gelöst. In diesem Fall müssen Sie also das Gegenteil tun.

PS. Alles, was Sie brauchen, ist das Präfix -webkit- und die Standardeigenschaften animation da alle anderen Anbieter ihre Präfixe weggelassen haben.

Cool, danke für den Workaround.

Die Sache mit mehreren Kopien auf einmal erscheint mir immer noch wie ein Fehler: Ich schreibe meinen Code in der Annahme, dass ein Element, das ng-if entweder einmal oder gar nicht vorhanden ist, und ich würde erwarten, dass Rahmen, um zu verhindern, dass er aufgrund eines unbeabsichtigten Noob-Fehlers so leicht bricht. Bitte korrigiert mich, wenn ich falsch verstanden habe, wie ng-if (oder ng-switch ) funktionieren soll.

Die Mehrfachkopien waren da, weil die Animationen noch liefen. Und $animate hat eine catch-all Animation für Keyframes/Übergänge, die nach Ablauf Ihrer Dauer * 1,5 auftritt. Deshalb verschwinden sie nach einem Moment.

Ihr ng-if-Code ist korrekt. Und ja, es ist nur da, wenn es wahr ist. Aber die Interna erstellen jedes Mal eine neue Kopie des Elements, wenn der Ausdruck wieder wahr wird. Da die Animation jedoch am älteren Element hängt, wurde sie noch nicht gelöscht, bis die Catch-All-Animation eintrifft.

Und ng-switch und ng-if funktionieren auf die gleiche Weise. Nur ng-switch hat mehrere Elemente statt nur eines.