转自点击打开链接
————————————————————————
AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。
AngularJS中实现动画效果有两大种方式：
- 基于CSS的动画效果
- CSS TransitionAnimation
- CSS Class-based Animation
- 基于Javascript的动画效果
官方给出的能支持动画效果的Directives：
| Directive | Supported Animations | |||
|---|---|---|---|---|
| ngRepeat | enter,leave and move | |||
| ngView | enter and leave | |||
| ngInclude | ngSwitch | ngIf | ngClass | add and remove (the CSS class(es) present) |
| ngShow&ngHide | add and remove (the ng-hide class value) | |||
| form&ngModel | add and remove (dirty,pristine,valid,invalid & all other validations) | |||
| ngMessages | add and remove (ng-active & ng-inactive) | |||
| ngMessage | enter and leave |
基于CSS的动画效果:
1. CSS Transition Animation
示例1（官方Demo）：
1 <!DOCTYPE> 2 <html 3 head 4 style type="text/css" 5 /* 开始时的样式 */ 6 .fade.ng-enter { 7 transition: 5s linear all; 当使用css transition实现动画效果时，在开始时的样式中必须包含transition的设置 8 opacity0 9 }10 11 结束时的样式 12 .ng-enter.ng-enter-active 13 114 15 </style16 17 script src"/Scripts/angular.js"script18 "/Scripts/angular-animate.js"19 "text/javascript" 20 (function () { 21 var app = angular.module('cssBasedAnimationTest',[ngAnimate]); 22 })(); 23 24 25 body ng-app"cssBasedAnimationTest"26 div ng-if"bool" class"fade"27 Fade me in out 28 div29 button ng-click"bool=true"Fade In!button30 "bool=false"Fade Out!31 body32
注意：使用CSS Transition时，ng-EVENT（动画开始前的样式）和ng-EVENT-active（动画执行完毕后的样式）这两组样式必须同时出现，且在ng-EVENT中必须包含transition的设置。
本篇开头提到过，AngularJS核心库并不包含ngAnimate模块，因此我们首先需要在定义Module时，添加对ngAnimate模块引用的声明：
var app = angular.module('cssBasedAnimationTest',['ngAnimate']);
使用ngIf（ng-if）来控制class="fade"的元素是否加载到DOM：
注意：ngIf和ngShow/ngHide不同，ngIf在元素隐藏时DOM中并没有该元素，而使用ngShow/ngHide时元素依然存在于DOM中。点击"Fade In!"按钮时，加载div到DOM并触发enter，AngularJS对元素自动添加ng-enter和ng-enter-active的样式，并从ng-enter到ng-enter-active执行样式转换。为了能看清过程，我们将ng-enter中的过渡时间设置为5s，点击"Fade In!"按钮后观察Html的变化。
Step 1（点击前，如前面所说，ngIf在触发前，DOM中并没有div）：
Step 2（点击按钮后，AngularJS自动添加了ng-animate、ng-enter、ng-enter-active这三个动画相关的样式名，并由ngAnimate模块执行动画效果）：
Step 3（动画执行完后，示例中是5s后，ng-animate、ng-enter、ng-enter-active被移除，div的状态为ng-enter-active中指定的状态）：
另外一种CSS transition的方法是使用CSS的Keyframe关键字，对于示例1中样式文件可改为如下：
1 <style type="text/css"> 2 开始时的样式，使用keyframes不需要定义结束时的样式 */ 3 .ng-enter { 4 animation: my_fade_animation 0.5s linear; 5 -webkit-animation: 6 } 7 8 @keyframes my_fade_animation { 9 from { 10 opacity: 0; 11 } 12 13 to { 14 1; 15 } 16 } 17 18 @-webkit-keyframes my_fade_animation { 19 20 21 } 22 23 24 25 } 26 27 </style>这种写法中是不需要ng-EVENT-active的。
2. CSS Class-based Animation:
Class-based Animation即为通过ngClass、ngShow、ngHide等Directives执行动画效果。
示例2：
.ng-hide { transition3s linear allopacity } .ng-show ( cssClassBasedAnimationTest]); })(); "cssClassBasedAnimationTest"ng-initng-show This is ng-show. ng-hide This is ng-hide. "bool=!bool"Toggle本例改自官方Demo，除了官方Demo中有点问题之外，另外我自己添加了.fade.ng-show以及两个div分别使用ng-show和ng-hide两个属性。为了能看清Html的变化，动画过渡时间也设置成了3s。
图1：
图2：
实际观察Html的变化，无论是ngShow还是ngHide，其实都是在隐藏元素时，默认添加ng-hide-animate、ng-hide-add、ng-hide-add-active样式。也就是针对像ngHide、ngShow等这些可以感知动画的Directives，由AngularJS的ngAnimate模块自动添加了CSS Transition动画。
ngAminate能检测的行为是样式的add或者remove， 那如何显式的指定add和remove的样式呢？
示例3（官方Demo）：
5 .highlight 6 7 8 9 .highlight.on-add background white11 .on yellow15 17 .on-remove 18 black19 20 21 22 23 24 25 26 27 28 29 30 31 ng-class"{on:onOff}""highlight" Highlight this box 33 34 "onOff=!onOff"35 36 我们让ng-class随着点击Toggle按钮变化，当onOff=true时样式on会被ngAnimate执行on-add的过程，反之则执行on-remove的过程。由于显式指定了样式，当我们运行示例3时，这个过程就一目了然了。基于Javascript的动画效果:
使用基于Javascript的动画效果可以让你在脚本中使用其他的Service甚至引用第三方的脚本进行动画的制作，使动画效果更丰富多变。
与基于CSS的动画效果相似，基于Javascript的动画效果也会由AngularJS自动添加一些指定的样式到元素上，但基于Javascript的动画效果还需要使用module.animation()添加动画脚本。
示例4：
56 "/Scripts/jquery-1.9.1.js" 7 8 9 javascriptBasedAnimationTest10 11 app.animation(.slide12 return { 13 enter: (element,doneFn) {14 jQuery(element).fadeIn(100015 },16 17 move: 18 19 20 21 leave: jQuery(element).fadeOut(23 } 24 }]); 26 app.controller(myController$scope ($scope) {28 $scope.students ["Tom"JackAliceMayThomas]; 29 30 31 33 "javascriptBasedAnimationTest"ng-controller"myController""isshow"ng-repeat"stu in students""slide" {{ stu }} 36 37 input "button"value"Toggle""isshow=!isshow" />38 39 注：本例为了便于实现js的动画效果引入了jQuery。示例4中，我们对class='slide'的元素的AngularJS中的默认行为添加了动画行为，当使用ngIf让元素enter或者remove时，将触发动画效果。
关于更复杂的对象，也可参考参考资料中提到的AngularJS Hub的例子，本文就不展开了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。