Search code examples
angularjsng-animate

angular ng-animate directive with ng-show directive

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!

Solution

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