简介
Angular为一些常用的指令（ngRepeat,ngSwitch,ngView）提供了动画的hooks，自动的指令也可以通过$animate服务来实现。这些指令上的动画hook被设置来代替一些繁琐的代码，比如通过条件触发来达到各种效果，比如css的过渡，css形式的动画或者一个js的回调。
一定要在app中注入ngAnimate模块，动画才能起作用。下面是一个可以用于ngShow和ngHide的例子。
<!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> .content-area { border: 1px solid black; margin-top: 10px; padding: 10px; } .sample-show-hide { transition: all linear 0.5s; } .sample-show-hide.ng-hide { opacity: 0; } </style>
</head>
<body ng-controller="ainmationController">
<div ng-init="checked = true">
<label>
<input type="checkBox" ng-model="checked"/>
Is visible
</label>
<div class="content-area sample-show-hide" ng-show="checked">
Content...
</div>
</div>
</body>
<script> var myanimation = angular.module("myanimate",['ngAnimate']); myanimation.controller("ainmationController",function () { }); </script>
</html>
工作原理
angularjs的动画是完全基于css的，只要你将相应的css应用到html元素中，你就可以使用动画。下面，我们来看一个repeater的例子。
<!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> /* 为元素的新增和顺序改变用css的transition方式增加动画效果 */ .repeated-item.ng-enter,.repeated-item.ng-move { transition: all 0.5s linear; opacity: 0; } /* 上面transition方式动画的目标效果 */ .repeated-item.ng-enter.ng-enter-active,.repeated-item.ng-move.ng-move-active { opacity: 1; } /* 为元素的移除使用css3的keyframe方式增加动画效果 */ .repeated-item.ng-leave { animation: 0.5s my_animation; } @keyframes my_animation { from { opacity: 1; } to { opacity: 0; } } </style>
</head>
<body ng-controller="ainmationController as ctrl">
<div ng-repeat="item in items" class="repeated-item">
{{ item.id }}
</div>
<button ng-click="ctrl.add()">add</button>
<button ng-click="ctrl.remove()">remove</button>
<button ng-click="ctrl.reverse()">reverse</button>
</body>
<script> var myanimation = angular.module("myanimate",['$scope',function ($scope) { $scope.items = []; $scope.items.push({"id": "1001"}); $scope.items.push({"id": "1002"}); $scope.items.push({"id": "1003"}); this.add = function () { $scope.items.push({"id": "1004"}); } this.remove = function () { $scope.items.pop(); } this.reverse = function () { $scope.items.reverse(); } }]); </script>
</html>
每个ng-repeat重复的元素节点都会带有repeated-item的样式，它将告诉每个元素如何演示动画效果。在这里要说明一下：每增加一个元素，这个元素就增加一个ng-enter的css;如果元素顺序发生改变，就会增加一个ng-remove的css;移除一个元素，就会增加一个ng-leave的CSS。这些css会在动画完成后消失。
为了更好的理解，来看一下用jquey实现同样的效果：
myModule.animation('.repeated-item',function() {
return {
enter: function(element,done) {
// 初始化元素的opacity
element.css('opacity',0);
// 用opacity方式实现动画
element.animate({opacity: 1},done);
// 当取消事件产生后，停止动画
return function(isCancelled) {
if (isCancelled) {
element.stop();
}
};
},leave: function(element,done) {
element.css('opacity',1);
element.animate({opacity: 0},done);
return function(isCancelled) {
if (isCancelled) {
element.stop();
}
};
},// 其他事件的动画也是一样的实现方式
move: function(element,done) {},addClass: function(element,className,removeClass: function(element,done) {}
}
});
元素上的css决定了angularjs什么时候执行动画，同一个css上如果想css动画和javascript动画一起使用的话需要使用$animateCss.
Class和ngClass的动画hook
angularjs也为css的class更改附加了动画hook，也就是说当css的class的值添加或者移除时就会相应的产生动画效果，但要注意的一点是仅仅ng-class的相应的插值发生改变时才会触发这个动画。
<!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> .css-class-add,.css-class-remove { transition: all 0.5s cubic-bezier(0.250,0.460,0.450,0.940); } .css-class { color: red; font-size: 3em; } </style>
</head>
<body ng-controller="ainmationController as ctrl">
<p>
<button ng-click="myCssVar='css-class'">Set</button>
<button ng-click="myCssVar=''">Clear</button>
<br>
<span ng-class="myCssVar">css-Animated Text</span>
</p>
</body>
<script> var myanimation = angular.module("myanimate",function ($scope) { }]); </script>
</html>
支持动画的指令
一些常用的指令在他们生命周期的几个主要事件上可以触发动画，下面列表详细的给出了各个指令可以支持的动画：
| 指令 | 动画 |
|---|---|
| ngRepeat | enter,leave,and move |
| ngIf | enter and leave |
| ngSwitch | enter and leave |
| ngInclude | enter and leave |
| ngView | enter and leave |
| ngMessage / ngMessageExp | enter and leave |
| ngClass / {{class}} | add and remove |
| ngClassEven / ngClassOdd | add and remove |
| ngHide | add and remove (the ng-hide class) |
| ngShow | add and remove (the ng-hide class) |
| ngModel | add and remove (varIoUs classes) |
| form / ngForm | add and remove (varIoUs classes) |
| ngMessages | add and remove (the ng-active/ng-inactive classes) |
自定义指令中使用动画
自定义的指令可以通过注入$animate间接地使用动画。
myModule.directive('my-directive',['$animate',function($animate) {
return function(scope,element) {
element.on('click',function() {
if (element.hasClass('clicked')) {
$animate.removeClass(element,'clicked');
} else {
$animate.addClass(element,'clicked');
}
});
};
}]);
app引导启动和页面加载时的动画
你可能注意到了，我们之前ng-repeat的例子中，前三个数据是一下就出现的并没有动画，这是因为默认的app启动时的动画是禁止的，这是为了防止在页面有大量的动画时，可能会引起视觉上的混乱，对加载速度也有一定的影响。
在angularjs的内部，ngAnimate要等待app启动的引导完成，再等待模板的下载，还要等当前$digest的完成。一定要确保整个app编译之前，动画是不会运行的。
如果你一定要在app引导启动时产生动画效果，那么你需要在module的run方法中激活anmitate即可，但要注意这个激活是全局的。
myModule.run(function($animate) {
$animate.enabled(true);
});
怎么样选择性的启动，禁用或者跳过动画
有多种不同的方法来全局禁用动画或者禁用特定的动画。禁用特定的动画可以提升渲染的性能，比如一些很大的ngRepeat列表实际上是没有动画的。即使元素没有一个动画，ngAnimate都在运行时会去检查有没有动画要演示，这是会影响性能的。
在config中，使用$animateProvider.classNameFilter()
这个函数可以在app的配置阶段被调用，它仅仅接受一个正则表达式参数，用于匹配需要展示动画的元素class的名称。正则表达式有极大的灵活性，通过这个可以很方便的指定或者排除相应的动画。
myanimation.config(function ($animateProvider) {
$animateProvider.classNameFilter(/animate-/);
})
classNameFilter方法相较于其他策略来讲极大的提高了app的速率，因为匹配是在其他禁用启用策略之前就发生的，但是有个缺点就是无法使用两个classNameFilter策略，只能通过修改class名称的方式来达到动画的启用和禁用。
在run中，使用$animate.enabled()
这个函数启用/禁用动画的方式有两种:
只传一个boolean参数，将会全局的启用/禁用动画，$animate.enabled(false)将会禁用app的所有动画。
当第一个参数是一个原生dom元素或者是jqLite/jQuery的元素时，这个函数可以启用/禁用该元素及其所有子节点的动画：$animate.enabled(myElement,false)。当然你也可用在子节点上重新定义动画的启用/禁用。和classNameFilter不同的是，这个函数实在app的运行阶段作用的。
<body ng-controller="ainmationController as ctrl">
<p>
<button ng-click="myCssVar='css-class'">Set</button>
<button ng-click="myCssVar=''">Clear</button>
<br>
<span ng-class="myCssVar">css-Animated Text</span>
</p>
</body>
<script> var myanimation = angular.module("myanimate",['ngAnimate']); myanimation.run(function ($animate) { $animate.enabled(true); $animate.enabled(angular.element(document).find('p'),false); $animate.enabled(angular.element(document).find('span'),true); }).controller("ainmationController",function ($scope) { }]); </script>
有一点需要再重申一次：$animateProvider.classNameFilter()
策略的优先级要高于$animate.enabled()
通过css class：用ng-animate重写css class
当动画启动后，ngAnimate会在附加ng-animate的class在对应的元素上，持续整个动画周期，通过附加transition/animation的样式，可以成功跳过该动画。
.css-class-add.ng-animate { transition: 0s; }
.css-class-remove.ng-animate{ transition: 0s; }
通过把transition设为0s，可以让ngAnimate忽略掉已经存在的动画的样式，当然javascript的动画仍会执行。
在动画开始前防止闪烁
当在一个结构和的嵌套元素的动画中，比如ngIf动画嵌套在一个基于ngClass的DOM结构中时，在动画的启动过程中，有时会有一个短暂的闪烁产生。
为了不至于这样，你可以增加ng-[event]-prepare的class，这个class会在动画初始化的时候附加在元素上，当动画开始之前就会消失掉。这个class只在结构性的动画时产生（enter,move,and leave）。
以下是个防止闪烁的例子，你可以去掉注释标明的地方试下。
<!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> .red { background: red; border: 1px solid black; padding: 10px; } .blue { background: blue; border: 1px solid black; padding: 10px; } .message { background: white; border: 1px solid black; padding: 10px; } .message.ng-enter,.message.ng-leave { transition: all cubic-bezier(0.250,0.940) 1s; } .message.ng-enter,.message.ng-enter-prepare,/*不加这行就会闪烁*/ .message.ng-leave.ng-leave-active { opacity: 0; } .message.ng-leave,.message.ng-enter.ng-enter-active { opacity: 1; } </style>
</head>
<body ng-controller="ainmationController as ctrl">
<div ng-class="{red: myProp}">
<div ng-class="{blue: myProp}">
<div class="message" ng-if="myProp">message</div>
</div>
</div>
</body>
<script> var myanimation = angular.module("myanimate",['ngAnimate']); myanimation.run(function ($animate) { $animate.enabled(true); }).controller("ainmationController",function ($scope) { $scope.myProp = true; }]); </script>
</html>
