$animate服务给我们在指令中实现自定义动画提供了帮助。把$animate服务注入到我们自己的应用中之后，可以用暴露出的事件为每个事件触发$animate对象上的关联函数。
大家应该在指令中用动画用的比较多，比较指令的交互是angular最核心的部分。
下面给大家分析一个小例子
我来更新来了，学习了一下angular中的addClass和removeClass动画，这里的addClass和removeClass要和angular中element中的addClass和removeClass区分开。angular中element的中的addClass和removeClass和jquery中的addClass和removeClass是一样的。因为这是用angular内置的jquery包裹的。而$animate服务中的addClass和removeClass是指的是添加类和去除类的动画，实现方式有本质区别。下面把两者的过程给大家列出来。
1、addClass
(1) 运行所有在元素上用JavaScript定义的动画；
(2) [className]-add类被添加到元素上；
(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) [className]-add-active类被添加到元素的classList中（触发CSS动画）；
(5) $animate用定义过的持续时间等待完成；
(6) 动画结束，$animate移除两个添加的类：[className]-add和[className]-add-active；
(7) className类被添加到元素上；
(8) 触发done()回调函数（如果定义了的话）。
2、removeClass
(1) 运行所有在元素上用JavaScript定义的动画；
(2) [className]-remove类被添加到元素上；
(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) [className]-remove-active类被添加到元素的classList中（触发CSS动画）；
(5) $animate用定义过的持续时间等待完成；
(6) 动画结束， $animate 移除三个添加的类： [className] 、[className]-remove 和
[className]-remove-active；
(7) 触发done()回调函数（如果定义了的话）。
为了让大家理解更深入，下面附上一个小例子：
<!DOCTYPE html>
<html lang="en" ng-app="anApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-route.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/bootstrap.js" type="text/javascript"></script>
<script src="lib/angular-animate.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
}
.greenlight-add{
background:greenyellow;
font-size: 30px;
-webkit-transition: 2s linear all;
-moz-transition: 2s linear all;
-ms-transition: 2s linear all;
-o-transition: 2s linear all;
transition: 2s linear all;
opacity: 0.8;
}
@keyframes asdf {
from{opacity: 0;font-size: 20px}
to{opacity: 1;font-size:30px}
}
@-webkit-keyframes asdf {
from{opacity: 0;font-size: 20px}
to{opacity: 1;font-size:30px}
}
.greenlight-remove{
-webkit-animation: 2s asdf;
-moz-animation: 2s asdf;
-o-animation: 2s asdf;
animation: 2s asdf;
background:greenyellow;
}
</style>
</head>
<body ng-controller="aniController">
<div my-directive></div>
<div my-remove></div>
</body>
<script>
var app=angular.module('anApp',['ngAnimate']);
app.controller('aniController',['$scope', function ($scope) {
}]);
app.directive('myDirective', ['$animate', function ($animate) {
return{
restrict:'EA',
replace:true,
template:'<div class="myDirective">123</div>',
link: function (scope, element, attrs) {
element.bind('click', function () {
$animate.addClass(element,'greenlight')
//element.addClass('greenlight');
})
}
}
}]);
app.directive('myRemove',['$animate', function ($animate) {
return{
restrict:'EA',
replace:true,
template:'<div class="greenlight">123123</div>',
link: function (scope, element, attr) {
element.bind('click', function () {
$animate.removeClass(element,'greenlight')
element.removeClass('greenlight');
})
}
}
}])
</script>
</html>
可能大家还是不太理解，我来解释一下，在$animate.removeClass(element,'greenlight')中angular解释过程中会自动为greenlight添加一个-add，称为greenlight-add，添加到类名中。
removeClass也一样，不要理解成类的移除，而是通过添加一个类名来达到removeClass的效果，具体自己试一试拉。
如有错误，欢迎指出啊。
