AngularJSAngularJS-之-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. </div>
  4.  
  5. <!– Expanded –>
  6. <div ng-repeat=”item in
    itens” ng-animate=”{enter: ‘animate-enter’, leave:
    ‘animate-leave’}”>
  7. </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/

相关文章