$animate服務(wù)給我們在指令中實(shí)現(xiàn)自定義動畫提供了幫助设预。把$animate服務(wù)注入到我們自己的應(yīng)用中之后，可以用暴露出的事件為每個事件觸發(fā)$animate對象上的關(guān)聯(lián)函數(shù)豆胸。
大家應(yīng)該在指令中用動畫用的比較多衬廷，比較指令的交互是angular最核心的部分。
下面給大家分析一個小例子
我來更新來了，學(xué)習(xí)了一下angular中的addClass和removeClass動畫西潘，這里的addClass和removeClass要和angular中element中的addClass和removeClass區(qū)分開卷玉。angular中element的中的addClass和removeClass和jquery中的addClass和removeClass是一樣的。因?yàn)檫@是用angular內(nèi)置的jquery包裹的喷市。而$animate服務(wù)中的addClass和removeClass是指的是添加類和去除類的動畫相种，實(shí)現(xiàn)方式有本質(zhì)區(qū)別。下面把兩者的過程給大家列出來品姓。
1寝并、addClass
(1) 運(yùn)行所有在元素上用JavaScript定義的動畫；
(2) [className]-add類被添加到元素上腹备；
(3) $animate檢查CSS樣式來尋找過渡/動畫的持續(xù)時間和延遲屬性衬潦；
(4) [className]-add-active類被添加到元素的classList中（觸發(fā)CSS動畫）；
(5) $animate用定義過的持續(xù)時間等待完成馏谨；
(6) 動畫結(jié)束，$animate移除兩個添加的類：[className]-add和[className]-add-active附迷；
(7) className類被添加到元素上惧互；
(8) 觸發(fā)done()回調(diào)函數(shù)（如果定義了的話）。
2喇伯、removeClass
(1) 運(yùn)行所有在元素上用JavaScript定義的動畫喊儡；
(2) [className]-remove類被添加到元素上；
(3) $animate檢查CSS樣式來尋找過渡/動畫的持續(xù)時間和延遲屬性稻据；
(4) [className]-remove-active類被添加到元素的classList中（觸發(fā)CSS動畫）艾猜；
(5) $animate用定義過的持續(xù)時間等待完成；
(6) 動畫結(jié)束捻悯， $animate 移除三個添加的類： [className] 匆赃、[className]-remove 和
[className]-remove-active；
(7) 觸發(fā)done()回調(diào)函數(shù)（如果定義了的話）今缚。
為了讓大家理解更深入算柳，下面附上一個小例子：
<!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也一樣囱淋，不要理解成類的移除，而是通過添加一個類名來達(dá)到removeClass的效果餐塘，具體自己試一試?yán)?br>
如有錯誤妥衣，歡迎指出啊。
