AngularJS 1.2 - ngAnimate not working

Question

I am new to using ng-animate with AngularJS 1.2. I am not sure why my ng-animate does not work a certain class name but works with the default for a simple fade in that I saw in an example.

In this example, I try to set my ng-animate class to be 'animation': http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

but when I use the default, and my class name for animations is just ".ng-enter" and ".ng-leave", the fade in animation seems to work fine.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

Any help would be greatly appreciated, thanks!

Answer 1

Also important to remember to add the animation module as a dependency to your module definition. Just in case anyone else is having problems getting animations working and hasn't done this.

angular.module('myApp', ['ngAnimate']);

Answer 2

As Tasse said ng-animate is deprecated, we need to use the class. If you are copying CSS from angularjs web site http://www.nganimate.org/angularjs/ng-repeat/move then you need to modify those CSS in a particular format

For complete detail check Apply Angularjs Animation in 2 minutes

Answer 3

This is in addition to accepted answer, for those who are trying to animate an element with ng-show directive. These are styles which must be used:

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Please note, not all angular directives adds ng-enter, ng-enter-active, ng-leave and ng-leave-active. For example, ng-show directive adds ng-hide-remove at the beginning of animation and ng-hide-remove-active at the end of it. For more details follow this link: https://www.w3schools.com/angular/angular_animations.asp

Answer 4

You must check that the version of your angular.min.js matches with the version of angular-animate.min.js.
I got mine fixed this way.

Answer 5

The ng-animate attribute is deprecated in 1.2.

In 1.2 you define the appropriate CSS classes using a special naming convention. If you want a specific name like 'animation', you need to add that class to the element you want to animate.

As long as you have the correct CSS classes, some directives will be animated automatically. Which ones can be found here: http://docs.angularjs.org/api/ngAnimate

This is the reason your animation works in your second example when just defining the ".ng-enter" class. This would however automatically animate all directives that support the enter animation.

I have updated your first example to make it work with the class named 'animation':

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS (Keeping selectors ungrouped for clarity):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview