Angular.js: ng-if ведет себя странно с анимацией бесконечных ключевых кадров CSS

Проблема в том, что ngAnimate считает, что ваша бесконечная анимация существует для всех используемых анимационных событий (таких как вход, выход и т. Д.). И поскольку это бесконечная анимация, события CSS никогда не запускаются до тех пор, пока не пройдет последний обратный отсчет, то есть через 7,5 секунд (5 x 1,5 == 7,5).

Вам нужно будет указать ng-animate не анимировать бесконечную фоновую анимацию, переопределив класс .ng-animate CSS в элементе и отменив анимацию ключевых кадров.

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

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

К сожалению, определение стилей и классов CSS в JavaScript сильно ограничено. В более ранних версиях AngularJS у нас было правило, согласно которому вы можете определять анимацию / переход CSS только в свойстве анимации (например, .ng-enter, .ng-leave и т. Д.), Но это вызывало больше проблем, чем решало. Так что в этом случае вам нужно сделать наоборот.

PS. Все, что вам нужно, это префикс -webkit- и стандартные свойства animation поскольку все другие поставщики отказались от своих префиксов.

Круто, спасибо за обходной путь.

Функция одновременного копирования нескольких копий по-прежнему кажется мне ошибкой: я пишу свой код в предположении, что элемент, использующий ng-if , либо присутствует один раз, либо отсутствует вообще, и я ожидал, что framework, чтобы он не сломался так легко из-за непреднамеренной ошибки новичка. Пожалуйста, поправьте меня, если я неправильно понял, как работает ng-if (или ng-switch ).

Множественные копии были там, потому что анимация продолжалась. А в $ animate есть анимация catch-all для ключевых кадров / переходов, которая происходит после истечения срока действия * 1.5. Вот почему они исчезают через мгновение.

Ваш код ng-if правильный. И да, это возможно только тогда, когда это правда. Но внутренние компоненты создают новую копию элемента каждый раз, когда выражение снова становится истинным. Но поскольку анимация висит на более старом элементе, она еще не была удалена, пока не будет обработана вся анимация.

И ng-switch и ng-if работают одинаково. Только ng-switch имеет несколько элементов вместо одного.