先拿一個小例子講解一下
<!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>
上面的例子實現了一個添加和刪除li的動作，動畫是靠ngAnimate服務來完成，具體方法是使用了ngAnimate內置指令的動畫形式完成的。
.fade-in.ng-enter,.fade-in.ng-leave{
transition:2s linear all;
}
.fade-in.ng-enter,.fade-in.ng-leave表示.fade-in這個漸入動畫發生和結束的時候，所要進行的動作。
.fade-in.ng-enter-active .fade-in.ng-leave-active規定這個漸進動畫執行完時候的動作。并且觸發動畫。
$animate服務基于指令發出的事件來添加特定的樣式類，對于結構性的動畫，比如進入、離開、移動，添加上去的CSS類是<code>ng-[EVENT]<code>和</code>ng-[event]-active</code>這樣的樣式；
對于基于樣式類的動畫（比如ngClass），動畫類的樣式是<code>class-add，class-add-active，class-remove，class-remove-ative</code>
對于<code>ng-show</code>和<code>ng-hide </code>只有<code>.ng-hide</code>才會添加和移除，形式和<code>ng-class</code>一樣，<code>.ng-hide-add 、ng-hide-add-active、ng-hide-remove、ng-hide、</code>
下面更新一個用js寫的動畫
<!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>
總結一下：
其實在animation動畫里面跟jquery很一樣，element就是jquery對象，done()就是jquery中的$().animate({},fun)中的fn
