先拿一個(gè)小例子講解一下
<!DOCTYPE html>
<html lang="en" ng-app="animateone">
<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"/>
</head>
<style>
.fade-in.ng-enter,.fade-in.ng-leave{
transition: 2s linear all;
-webkit-animation: 2s linear all;
}
.fade-in.ng-enter{
opacity: 0.8;
color: greenyellow;
font-size: 20px;
}
.fade-in.ng-enter-active{
color: #000088;
font-size: 25px;
opacity: 0.5;
}
.fade-in.ng-leave{
color: red;
font-size: 10px;
}
.fade-in.ng-leave-active{
opacity: 0;
}
</style>
<body ng-controller="animateoneContro">
<ul>
<li class="fade-in" ng-repeat="key in values">{{key}}</li>
</ul>
</body>
<script>
var app=angular.module('animateone',['ngAnimate']);
app.controller('animateoneContro', function ($scope) {
$scope.values=['Ari', 'Q', 'Sean', 'Anand'];
setTimeout(function () {
$scope.values.push('anim');
$scope.$apply();
setTimeout(function () {
$scope.values.pop();
$scope.$apply();
},2000)
},1000);
})
</script>
</html>
上面的例子實(shí)現(xiàn)了一個(gè)添加和刪除li的動(dòng)作俺夕，動(dòng)畫是靠ngAnimate服務(wù)來完成批什，具體方法是使用了ngAnimate內(nèi)置指令的動(dòng)畫形式完成的难捌。
.fade-in.ng-enter,.fade-in.ng-leave{
transition:2s linear all;
}
.fade-in.ng-enter,.fade-in.ng-leave表示.fade-in這個(gè)漸入動(dòng)畫發(fā)生和結(jié)束的時(shí)候囚聚，所要進(jìn)行的動(dòng)作牲平。
.fade-in.ng-enter-active .fade-in.ng-leave-active規(guī)定這個(gè)漸進(jìn)動(dòng)畫執(zhí)行完時(shí)候的動(dòng)作堤框。并且觸發(fā)動(dòng)畫。
$animate服務(wù)基于指令發(fā)出的事件來添加特定的樣式類纵柿，對于結(jié)構(gòu)性的動(dòng)畫蜈抓，比如進(jìn)入、離開、移動(dòng)绕娘，添加上去的CSS類是<code>ng-[EVENT]<code>和</code>ng-[event]-active</code>這樣的樣式孝偎；
對于基于樣式類的動(dòng)畫（比如ngClass），動(dòng)畫類的樣式是<code>class-add腊嗡，class-add-active，class-remove拾酝，class-remove-ative</code>
對于<code>ng-show</code>和<code>ng-hide </code>只有<code>.ng-hide</code>才會(huì)添加和移除燕少，形式和<code>ng-class</code>一樣，<code>.ng-hide-add 蒿囤、ng-hide-add-active客们、ng-hide-remove、ng-hide材诽、</code>
下面更新一個(gè)用js寫的動(dòng)畫
<!DOCTYPE html>
<html lang="en" ng-app="animateone">
<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"/>
</head>
<style>
</style>
<body ng-controller="animateoneContro">
<ul>
<li class="fade-in" ng-repeat="key in values" >{{key}}</li>
</ul>
</body>
<script>
var app=angular.module('animateone',['ngAnimate']);
app.controller('animateoneContro', function ($scope) {
$scope.values=['Ari', 'Q', 'Sean', 'Anand'];
setTimeout(function () {
$scope.values.push('animateone');
$scope.$apply();
setTimeout(function () {
$scope.values.pop();
$scope.$apply();
},1000)
},1000)
});
app.animation('.fade-in', function() {
return {
enter: function(element, done) {
var op = 0, timeout,
animateFn = function() {
op += 10;
element.css('opacity', op/100);
if (op >= 100) {
clearInterval(timeout);
done();
}
};
element.css('opacity', 0);
timeout = setInterval(animateFn, 100);
},
leave: function(element, done) {
var op = 100,
timeout,
animateFn = function() {
op-=10;
element.css('opacity', op/100);
if (op <= 0) {
clearInterval(timeout);
done();
}
};
element.css('opacity', 100);
timeout = setInterval(animateFn, 100);
}
}
});
</script>
</html>
總結(jié)一下：
其實(shí)在animation動(dòng)畫里面跟jquery很一樣底挫，element就是jquery對象，done()就是jquery中的$().animate({},fun)中的fn
