ngAnimate не добавляет классы ng-enter/ng-left в пользовательском интерфейсе

Я был во всем Интернете, пытаясь выяснить проблему моей проблемы. Я не могу понять, что происходит. Наше приложение огромно, поэтому я не могу опубликовать код, который отстой. Мне просто нужно какое-то направление, я часами гуглял одно и то же.

ngAnimate не добавляет классы ng-enter / ng-листья и т. д., когда я добавляю новые данные в мой объект.

Работает ли ngAnimate таким же образом, когда вы фактически добавляете / удаляете данные в объект, или он работает только тогда, когда вы фильтруете данные?

Мы используем ui-router, а тело - это ui-view - действует ли ngAnimate так же, когда мы находимся внутри ui-view?

Краткий обзор (нефрит) - очевидно, в нашем приложении гораздо больше кода:

body(ui-view)
  script(src='/main.js')
   div(ng-controller="Controller")    
     div.contain
       div.animate(ng-repeat="item in items")
         {{item.name}}

Версии:

"dependencies": {
"angular": "1.3.15",
"angular-animate": "latest",
"angular-motion": "~0.4.2",
"angular-ui-router": "~0.2.13",
...

Я даже скопировал скрипты прямо из плункера, которые работали с плункерами, но мне не повезло с добавлением классов ngAnimate.

Это не проблема CSS, потому что я даже не вижу добавляемых классов в инспекторе.

Есть ли определенная версия, которую я должен использовать? В каком порядке они должны быть загружены? Может ли что-то отключить модуль ngAnimate?

Заранее большое спасибо за любые советы.

РЕДАКТИРОВАТЬ - я начинаю думать, что это проблема несовместимости между одним или несколькими нашими компонентами - у кого-нибудь есть идеи?

Вот наш файл bower.json

"dependencies": {
   "angular": "1.3.15",
   "angular-animate": "1.4.3",
   "angular-motion": "~0.4.2",
   "angular-ui-router": "~0.2.13",
   "angular-cookies": "1.3.10",
   "angular-moment": "latest",
   "lodash": "latest",
   "angular-facebook": "latest",
   "angular-bootstrap": "0.12.0",
   "angular-media-queries": "~0.3.0",
   "angular-slugify": "latest",
   "angular-local-storage": "~0.1.5",
   "angular-resource": "1.3.10",
   "angular-sanitize": "~1.3.10",
   "angular-touch": "~1.3.10",
   "angular-payments": "latest",
   "angular-chosen-localytics": "~1.0.7",
   "angular-lodash": "~0.1.2",
   "angular-slick": "~0.1.18",
   "angular-ui-select": "~0.9.6",
   "angular-socialshare": "~0.0.6",
   "angulartics": "~0.17.2",
   "angular-ladda": "latest",
   "ladda": "./vendor/ladda",
   "angular-gestures": "~0.3.0",
   "ryanmullins-angular-hammer": "~2.1.10",
   "angular-bootstrap-datetimepicker": "~0.3.8",
   "angular-pretty-checkable": "~0.1.5",
   "angular-loading-bar": "~0.7.0",
   "ngImgCrop": "./vendor/ngImgCrop",
   "angular-google-places-autocomplete": "~0.2.5",
   "ng-plangular": "./vendor/ng-plangular",
   "angular-timer": "./vendor/angular-timer",
   "offline": "~0.7.11",
   "angular-swing": "*",
   "angular-strap": "~2.3.1",
   "angulike": "~1.2.0",
   "angular-summernote": "~0.4.0",
   "ckeditor": "~4.5.1",
   "ng-ckeditor": "~0.2.1",
   "angular-file-upload": "~2.1.1",
   "ng-sortable": "~1.3.0"
 },
 "devDependencies": {},
 "resolutions": {
   "angular": "1.3.15"
 }
Источник

3 ответа

Решение

В моем случае мне пришлось понизить angular-animate до версии 1.3, и он начал работать.

Источник

Еще одна вещь, которую нужно проверить, это то, что ваш анимированный элемент находится внутри соответствующего углового приложения. У меня была та же проблема, и я отследил ее по анимированному элементу, добавляемому как прямой дочерний элемент тела документа, где элемент ngApp был родственным элементом указанного анимированного элемента, подобный этому:

<body>
    <div id="elementToBeAnimated"></div>
    ...
    <div id="mainApp" ng-app="foo"></div>
</body>

#elementToBeAnimated div был добавлен сторонней библиотекой - изменив свой контейнер div, чтобы быть внутри #mainApp решил проблему.

Источник

У меня была такая же проблема, вроде. Это может быть связано с определением времени перехода и анимации для одного и того же элемента с другим временем. Например:

.my-div {transition: .1s}

а потом где-то еще:

.my-div {animation: slideIn .7s}

Я обнаружил, что время перехода заменило анимацию... возможно, из-за уровней специфичности правил. С коротким временем перехода классы ng-animate, кажется, не применяются.

Источник
Другие вопросы по тегам