AngularJS-之-angular-animate.js使用篇（ngAnimate）

How to use AngularJS with NgAnimate

The directive nganimate is very simple. You just need to declare the ng-animate attribute to an element that have another directive that changes the DOM.

You can use the animations with the directives:

Directive	Animation Type
ngRepeat	enter, leave and move
ngView	enter and leave
ngInclude	enter and leave
ngSwitch	enter and leave
ngIf	enter and leave
ngShow and ngHide	show and hide

And there are three ways to make animations in AngularJS:

• CSS3 Transitions
• CSS3 Animations
• Javascript

I think that the CSS3 Transitions is the easiest way to do animation, but with the CSS3 Animations you can do much more complex animations. And with javascript, it is possible to do dynamic animations.

We will provite plunkers sample for a lot of cases, than you just need to change the css file to change the animation.

Important

You need to use at least the AngularJS 1.1.5.
//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js

CSS Class Names

By default, ngAnimate attaches two CSS classes for each animation event to the DOM element to achieve the animation. One with the animation name plus the animation type, and then, other with the animation nameplus the animation type plus the sufix "active".

For example, if you have an animation named animate, during the ngRepeat enter phase, the Angular will attach the class "animate-enter" and them the class "animate-enter-active".

There are 2 ways to set the name of the CSS3 classes that the directive will use, the short hand way, that you just set the animation name, or you can set an object that you will set the class for each animation type for the directive.

Sample

1. <!-- Short Hand -->
2. <div ng-repeat="item in itens" ng-animate=" 'animate' ">
3. ...
4. </div>
5.  
6. <!-- Expanded -->
7. <div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
8. ...
9. </div>

In both cases, the classes will be:

• For Enter: animate-enter & animate-enter-active
• For Leave: animate-leave & animate-leave-active

CSS Transition

To define a class with a CSS3 Transition, first set the transition property and the initial element state at thesetup class. Then, just set the final state at the active class.

For example, if you want the fade animation, set opacity to 0 at the setup class, and opacity to 1 at the active, like in this sample:

1. .animate-enter {
2. -webkit-transition: 1s linear all; /* Chrome */
3. transition: 1s linear all;
4. opacity: 0;
5. }
6.  
7. .animate-enter.animate-enter-active {
8. opacity: 1;
9. }

Be careful, and always use the animate-enter-active class with the animate-enter class, like the sample.

Contribute

Fell free to use and change any sample at this page. If you have any new animation ideas, please, send me the plunker and I will input it at this site.

Ng Repeat Animation

This is the most useful tag. Below you can see an HTML sample, and you can edit it at plunker. To test new css structures, just change de style.css file.

更多实例可参考：http://www.nganimate.org/