Ng-animate does not add the ng-enter and ng-leave classes

Question

This is my first project working with Angular and i have some troubles with ng-animate. I did a couple of tutorials and in the tutorials i got everything working fine. Now i'm using Angular for a project and i just can't get ng-animate to work properly. The classes such as "ng-enter" and "ng-leave" are not added to the different elements.

I've compared all kinds of working scripts with mine but just can't find out what i am doing wrong.

My header:

<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>

My HTML:

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

My 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'
      });
  } ]);

My 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 });
  });

The HTML of the first/main pagina:

<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>

If i'm correct the div's with the class 'hotspot' should receive the 'ng-enter' and 'ng-leave' classes... but somehow they don't.

Could anyone help me out with this? What am i doing wrong? Many thanks!!

Amblyopia

Where is your animation defined? – Plausible

Good question! Forgot to mention that part. To test i used a fairly simple one .ng-enter{ border: 1px solid red; } So while 'entering' it should show a red border, but it doesn't (i even tried adding !important to make sure it doesn't get overruled). – Amblyopia

Have you solved the problem? – Photozincography

Nope, have not found an solution :( – Amblyopia

Answer 1

Couple of things you should pay checkout:

1. You didn't mention which version on angular are you using. From version 1.2 animation works differently. There is a very good article regards: Remastered Animation
2. Also, the ng-animate philosophy is timing the addition and removal of CSS class(es), so the actual animation should be defined by CSS (which you didn't provide, so hard to figure what is wrong).
3. Moreover, the "actual" animation is where the ng-leave.ng-leave-active and ng-enter.ng-enter-active, take place. You can read more on this in the article.
4. Here is a very simple example that should give you a head start: Simple Plunker Example

Girard

Answer 2

if you use Angular from version 1.2 you must declare CSS class animation for element you want animate and insert 'ngAnimate' in your module.

 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);
}

Anadem

BROKEN LINK – Breton