先拿一个小例子讲解一下
<!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
