Angular.js: ng-if se comporta de forma extraña con animaciones de fotogramas clave infinitos de CSS

El problema es que ngAnimate cree que su animación infinita está ahí para todos los eventos de animación utilizados (como entrar, salir, etc.). Y dado que es una animación infinita, los eventos CSS nunca se activan hasta que haya pasado la cuenta regresiva final, que es después de 7.5 segundos (5 x 1.5 == 7.5).

Deberá decirle a ng-animate que no anime la animación de fondo infinita anulando la clase .ng-animate CSS en el elemento y cancelando las animaciones de fotogramas clave.

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

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

Desafortunadamente, la detección de estilos y clases CSS en JavaScript es muy limitada. Con versiones anteriores de AngularJS teníamos la regla de que solo se puede definir la animación / transición CSS en la propiedad de animación (como .ng-enter, .ng-leave, etc.), pero eso causó más problemas de los que resolvió. Entonces, en este caso, debes hacer lo contrario.

PD. Todo lo que necesita es el prefijo -webkit- y las propiedades estándar animation ya que todos los demás proveedores eliminaron sus prefijos.

Genial, gracias por la solución.

La cosa de copias múltiples a la vez todavía me parece un error: escribo mi código asumiendo que un elemento que usa ng-if está presente una vez o no está presente en absoluto, y esperaría que framework para evitar que se rompa tan fácilmente debido a un error involuntario de un novato. Corríjame si no he entendido bien cómo se pretende que funcione ng-if (o ng-switch ).

Las copias múltiples estaban ahí porque las animaciones todavía estaban en marcha. Y $ animate tiene una animación catch-all para fotogramas clave / transiciones que se produce después de que expira su duración * 1.5. Por eso desaparecen después de un momento.

Su código ng-if es correcto. Y sí, solo está ahí cuando es cierto. Pero los componentes internos hacen una nueva copia del elemento cada vez que la expresión vuelve a ser verdadera. Pero dado que la animación se cuelga del elemento anterior, aún no se ha eliminado hasta que aparece la captura de toda la animación.

Y ng-switch y ng-if funcionan de la misma manera. Solo ng-switch tiene varios elementos en lugar de solo uno.