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

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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
Questions:
Answers:

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.

see this codepen > http://codepen.io/rl/pen/pvbMyp

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