angularjsangularjs-ng-repeatng-animate

AngularJS 1.2 - ngAnimate not working

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!

Solution

  • 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