angular ng-animate directive with ng-show directive

Question

I cant get ng-animate to work with the ng-show directive. Here is a JSBin simplified example:

http://jsbin.com/uquzal/1/edit

For some reason my CSS classes .show-animation-setup and .show-animation-start are not working. Any ideas? Thanks!

Answer 1

You need to be running AngularJS version 1.1.4 or newer, with 1.1.5 being the latest right now. You also need to use a different set of CSS rules — they've changed since the first release.

Updated jsbin

Modify your HTML to point to 1.1.5:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

And change your CSS rules to use .show-animation for setup and .show-animation.show-animation.active for the active animation:

.show-animation {
  background-color:red;
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -ms-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  opacity: 0;
}

.show-animation.show-animation-active {
  background: blue;
  opacity: 1;
}

Also please note, if you are testing under Firefox, I have found that there is a bug where the animations are inconsistently applied. I think it's already fixed in the trunk, but not yet available on a release branch.