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

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