angularjs - examples - ng show animation

ngAnimate no agrega clases ng-enter/ng-leave dentro de ui-view

Question

He estado en toda la web tratando de resolver el problema de mi problema. Parece que no puedo entender lo que está pasando. Nuestra aplicación es masiva, así que realmente no puedo publicar el código que apesta. Solo necesito una dirección, he estado buscando en Google lo mismo por horas.

ngAnimate no agrega las clases ng-enter / ng-leave, etc. cuando agrego datos nuevos a mi objeto.

¿Actúa ngAnimate de la misma manera cuando realmente está agregando / eliminando datos a un objeto, o solo funciona cuando está filtrando datos?

Estamos usando ui-router, y el cuerpo es el ui-view. ¿NgAnimate actúa igual cuando estamos dentro del ui-view?

Breve descripción (jade): obviamente, hay mucho más código en nuestra aplicación:

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

Versiones:

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

Incluso he copiado scripts directamente de plunker que estaban trabajando sin éxito con la adición de las clases ngAnimate.

No es un problema de CSS porque ni siquiera veo las clases que se agregan en el inspector.

¿Hay alguna versión que necesito usar? Cierto orden en que estos deben ser cargados? ¿Podría algo estar deshabilitando el módulo ngAnimate todos juntos?

Muchas gracias de antemano por cualquier consejo.

EDITAR - Empiezo a pensar que es un problema de incompatibilidad entre uno o más de nuestros componentes: ¿alguien tiene alguna idea?

Aquí está nuestro archivo 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"
 }

Answer 1

En mi caso, tuve que degradar angular-animate a la versión 1.3 y comenzó a funcionar.

Answer 2

Estaba teniendo el mismo problema, más o menos. Puede estar relacionado con la definición de un tiempo de transición y una animación en el mismo elemento con un tiempo diferente. Por ejemplo:

.my-div {transition: .1s}

y luego en otro lado:

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

Descubrí que el tiempo de transición reemplazó a la animación ... posiblemente debido a los niveles de especificidad de la regla. Con un tiempo de transición corto, las clases ng-animate parecen no aplicarse.

Answer 3

Otra cosa que debes comprobar es que tu elemento animado se encuentra dentro de la aplicación angular correspondiente. Tuve el mismo problema, y ​​lo rastreé por el elemento animado que se agrega como un elemento directo del cuerpo del documento, donde el elemento ngApp era un hermano de dicho elemento animado, similar a esto:

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

El div #elementToBeAnimated fue agregado por una biblioteca de terceros, cambiando su contenedor div para que esté dentro #mainApp resolvió el problema.