利用CSS3在Angular中实现动画
废话不多说了，直接给大家贴实例代码。
直接看例子：
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件1</title><scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script><styletype="text/css">
.box{width:200px;height:200px;background-color:red;transition:1sall;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<divng-controller="Aaa">
<inputtype="checkbox"ng-model="bBtn">
<divclass="box"ng-if="bBtn"></div>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn=true;
}]);
</script>
</body>
</html>
引入angular-animate插件，我们绑定了ng-if指令，在删除和添加DOM节点的时候，angular会添加指定的class，方便我们完成动画。
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
现在再看看显示和隐藏。
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件4</title>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<styletype="text/css">
.box{width:200px;height:200px;background-color:red;transition:1sall;}
/*显示操作*/
.box.ng-hide-remove{opacity:0;}
.box.ng-hide-remove-active{opacity:1;}
/*隐藏操作*/
.box.ng-hide-add{opacity:1;}
.box.ng-hide-add-active{opacity:0;}
</style>
</head>
<body>
<divng-controller="Aaa">
<inputtype="checkbox"ng-model="bBtn">
<divclass="box"ng-show="bBtn"></div>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn=true;
}]);
</script>
</body>
</html>
.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active
这个例子我们使用的是ng-show，属于显示和隐藏。上一个例子是ng-if，属于添加和删除。
回顾上一节我们提到的路由，我们可以结合起来操作。
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件2</title><scripttype="text/javascript"src="js/angular.min.js"></script>
<scripttype="text/javascript"src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
<scripttype="text/javascript"src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script><styletype="text/css">
.box{transition:1sall;position:absolute;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<divng-controller="Aaa">
<ahref="javascript:void(0);"ng-click="$location.path('aaa')">首页</a>
<ahref="javascript:void(0);"ng-click="$location.path('bbb')">内容</a>
<ahref="javascript:void(0);"ng-click="$location.path('ccc')">标题</a>
<divclass="box"ng-view></div>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngRoute','ngAnimate']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template:'<h1>AAA</h1>{{name}}',
controller:'Aaa'
}).when('/bbb',{
template:'<h1>BBB</h1>{{name}}',
controller:'Bbb'
}).when('/ccc',{
template:'<h1>CCC</h1>{{name}}',
controller:'Ccc'
}).otherwise({
redirectTo:'/aaa'
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name='xiecg-Aaa';
$scope.$location=$location;
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name='xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name='xiecg-Ccc';
}]);
</script>
</body>
</html>
这样在切换页面的时候就有淡入淡出的效果。
再回顾前面的几章讲的百度搜索：
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件3</title><scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script><styletype="text/css">
.box{transition:1sall;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{display:none;}
.box.ng-enter-stagger{animation-delay:0.1s;}
</style>
</head>
<body>
<divng-controller="Aaa">
<inputtype="text"ng-model="name"ng-keyup="change(name)">
<inputtype="button"ng-click="change(name)"value="搜索">
<ul>
<liclass="box"ng-repeat="dindata">{{d}}</li>
</ul>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
vartimer=null;
$scope.data=[];
$scope.change=function(name){
$timeout.cancel(timer);
timer=$timeout(function(){
$http({
method:'JSONP',
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
}).success(function(data,state,headers,config){
console.log(data);
$scope.data=data.s;
}).error(function(data){
console.log(data);
});
},500);
};
}]);
</script>
</body>
</html>
通过跨域我们得到百度返回过来的数据，依次过渡显示到页面上。
下面来看JS动画的例子：
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件5</title>
<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<styletype="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<divng-controller="Aaa">
<inputtype="checkbox"ng-model="bBtn">
<divclass="box"ng-if="bBtn"></div>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngAnimate']);
//ng-if
m1.animation('.box',function(){
return{
//hide（删除）
leave:function(element,done){
//console.log(element,done);//元素节点&删除节点的回调函数
$(element).animate({
width:0,
height:0
},1000,done);
},
//show（填充）
enter:function(element,done){
//ng-if会动态创建元素，元素默认就有200的高宽。。。
$(element).css({
width:0,
height:0
}).animate({
width:200,
height:200
},1000,done);
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn=true;
}]);
</script>
</body>
</html>
JS动画我们使用JQ的动画库来完成，注意我们在视图上使用的是ng-if，表示添加和删除DOM节点，所以我们在控制器returnleave&enter。
JS动画有了ng-if，自然就是ng-show。
<!DOCTYPEHTML>
<htmlng-app="myApp">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ngAnimate插件5</title>
<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript"src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<styletype="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<divng-controller="Aaa">
<inputtype="checkbox"ng-model="bBtn">
<divclass="box"ng-show="bBtn"></div>
</div>
<scripttype="text/javascript">
varm1=angular.module('myApp',['ngAnimate']);
//ng-show
m1.animation('.box',function(){
return{
//hide（隐藏）
addClass:function(element,sClass,done){
//console.log(element,sClass,done);//元素节点&样式名&删除节点的回调函数
$(element).animate({
width:0,
height:0
},1000,done);
},
//show（显示）
removeClass:function(element,sClass,done){
$(element).animate({
width:200,
height:200
},1000,done);
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn=true;
}]);
</script>
</body>
</html>
在控制器returnaddClass&removeClass，表示隐藏和显示。