Installation of ngAnimate Module not working

Question

I can't seem to get ng-animate to work in an existing 1.2 application. I've followed the check list in the API, but it isn't applying the appropriate animate classes.

I feel like I must be missing something silly in the installation process. Here's what I've done:

1 - I'm loading angular and angular-animate in the head of my document here:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <!-- load angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> <!-- load angular animate -->

2 - I am adding the module as a dependency in my app declaration here:

var app = angular.module('app', ['mainCtrl', 'mainService', 'ngRoute', 'ngAnimate', 'sortable', 'services.breadcrumbs']);

And that's it! It should be working right? All I get when using ng-show is the ng-hide class. I was expecting to get the ng-hide-add and ng-hide-remove classes as well, but nothing has changed.

What am I missing? Thanks for the help.

Answer 1

Set CSS rules to handle the animations; otherwise, you won't see the changes you're expecting to the class as you inspect the element.

Example:

.ng-hide-add,
.ng-hide-remove {
  transition:0.5s linear all;

  display:block!important;
  opacity:1;
}
.ng-hide {
  opacity:0;
}

Demo

Answer 2

I don't think this should count as an answer, but it works just fine if I use angular's beta release (1.3.0-beta.5). I still would like to know why the stable release is not working properly, but the beta release is...

Answer 3

If you are working with ui-view instead of ng-view, you might have to add ng-animate-children attribute to the ui-view tag within which the html template is loading. For ex:

<ui-view ng-animate-children></ui-view>

It worked for me as I was unable to animate ng-repeat. Once I added this attribute, the animations began.

Hope this helps. Good Luck.