$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的效果，具體自己試一試拉。
如有錯誤，歡迎指出啊。
