nganimate - ng-enter angularjs

Ng-animate no agrega las clases ng-enter y ng-leave

Question

Este es mi primer proyecto que trabaja con Angular y tengo algunos problemas con ng-animate. Hice un par de tutoriales y en los tutoriales conseguí que todo funcionara bien. Ahora estoy usando Angular para un proyecto y simplemente no puedo hacer que ng-animate funcione correctamente. Las clases como "ng-enter" y "ng-leave" no se agregan a los diferentes elementos.

He comparado todo tipo de scripts de trabajo con los míos, pero simplemente no puedo descubrir qué estoy haciendo mal.

Mi encabezado:

<link rel="stylesheet" href="css/app.css">
<script src="js/libraries/jquery-2.1.1.min.js"></script>
<script src="js/libraries/angular.js"></script>
<script src="js/libraries/angular-animate.js"></script>
<script src="js/libraries/angular-resource.js"></script>
<script src="js/libraries/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

Mi HTML:

<div class="view-container">
<div ng-view class="{{pageclass}} view-frame"></div>
</div>

Mi app.js

''use strict'';
/* App Module */
var engineShowcaseApp = angular.module(''engineShowcaseApp'', [
''ngRoute'',
''ngAnimate'',
''engineShowcaseController'',
''engineShowcaseServices''
]);
engineShowcaseApp.config([''$routeProvider'',
function ($routeProvider) {
$routeProvider.
when(''/'', {
templateUrl: ''partials/main.html'',
controller: ''MainCtrl''
}).
when(''/chapters/:chapterID'', {
templateUrl: ''partials/chapter.html'',
controller: ''ChapterCtrl''
});
} ]);

Mis controllers.js:

''use strict'';
/* Controllers */
var engineShowcaseController = angular.module(''engineShowcaseController'', []);
engineShowcaseController.controller(''MainCtrl'', function ($scope, Main) {
$scope.pageclass = "page-home";
$scope.hotspots = Main.query();
});
engineShowcaseController.controller(''ChapterCtrl'', function ($scope, $routeParams, Main) {
$scope.pageclass = "page-chapter";
$scope.chapter = Main.get({ chapterID: $routeParams.chapterID });
});

El HTML de la primera / página principal:

<div
ng-repeat="hotspot in hotspots"
class="hotspot hotspot-{{hotspot.id}}"
data-nextup="chapter-{{hotspot.id}}"
data-startframe="{{hotspot.startFrame}}"
data-endframe="{{hotspot.endFrame}}">
<a href="#/chapters/{{hotspot.chapterID}}">
{{hotspot.label}}
</a>
</div>

Si corrijo, los div con la clase ''hotspot'' deberían recibir las clases ''ng-enter'' y ''ng-leave'' ... pero de alguna manera no lo hacen.

¿Alguien podría ayudarme con esto? ¿Qué estoy haciendo mal? ¡¡Muchas gracias!!

Answer 1

Si usa Angular de la versión 1.2, debe declarar la animación de la clase CSS para el elemento que desea animar e insertar ''ngAnimate'' en su módulo.

 var app = angular.module(''myApp'', [''ngAnimate'']);

.element.ng-enter {
transition: all linear 500ms;
opacity: 0;
}
.element.ng-enter-active {
opacity: 1;
}
.element.ng-leave {
transition: all linear 500ms;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.element.ng-leave-active {
opacity: 0;
transform: translate3d(100px, 0, 0);
}

Answer 2

Un par de cosas que deberías pagar:

1. No mencionaste qué versión en angular estás usando. A partir de la versión 1.2 la animación funciona de manera diferente. Hay un muy buen artículo respecto a: Animación remasterizada.
2. Además, la filosofía ng-animate es sincronizar la adición y eliminación de las clases CSS, por lo que la animación real debe definirse mediante CSS (que no proporcionó, por lo que es difícil entender qué es lo que está mal).
3. Además, la animación "real" es donde tienen lugar las ng-leave.ng-leave-active y ng-enter.ng-enter-active . Puedes leer más sobre esto en el artículo.
4. Aquí hay un ejemplo muy simple que debería darle una ventaja: Ejemplo de Plunker simple