一、官方给的ngAnimate库的使用
演示地址:http://augus.github.io/ngAnimate/
源代码地址:https://github.com/Augus/ngAnimate
二、完整的AngularJS动画+路由实例
路由配置动态加载视图和控制器
1.主页
引用:
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/ng-animation.css" rel="stylesheet" />
<script src="../Scripts/Angular/angular.min.js"></script>
<script src="../Scripts/Angular/ocLazyLoad.min.js"></script>
<script src="../Scripts/Angular/angular-ui-router.min.js"></script>
<script src="../Scripts/Angular/angular-animate.min.js"></script>
HTML:
<div class="container" ng-app="myApp">
<ul class="nav nav-pills">
<li role="presentation"><a href="#/home">首页</a></li>
<li role="presentation"><a href="#/about">关于页面</a></li>
<li role="presentation"><a href="#/site">网站地图</a></li>
</ul>
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">模板内容</div>
</div>
<div class="panel-body slide-top" ui-view></div>
</div>
</div>
js:
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'oc.lazyLoad']);
//配置路由
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.
when('', '/home')
.when('/', 'home');
//一级页面
$stateProvider.state('main', {
url: '/:first',
/**此处动态加载控制器和视图**/
views: {
"": {
templateUrl: function ($stateParams) {
return '/template/' + $stateParams.first + '.html';
},
resolve: {
des: function ($ocLazyLoad, $stateParams) {
if ($stateParams.first == 'site')
return;
return $ocLazyLoad.load('/template/' + $stateParams.first + '.js');
}
}
}
}
});
});
2.Home页
视图:
<h3>这是home页面</h3>
<div class="list-group" ng-controller="homeController">
<div class="list-group-item list-group-item-info slide-right" ng-repeat="item in numbers">
会员数量 <span class="badge">{{item}}</span>
</div>
</div>
controller:
angular.module('myApp')
.controller('homeController', function ($scope, $timeout) {
console.info('home.js');
$scope.numbers = [];
for (var i = 0; i < 5; i++) {
(function (i) {
$timeout(function () {
$scope.numbers.push(i);
}, i * 200);
})(i);
}
});
3.about页
视图:
<h3 class="text-success">
这是关于我们页面
</h3>
<div class="row" ng-controller="aboutController" style="min-height:300px;">
<div class="col-xs-6 col-md-3 scale-fade-in" ng-repeat="item in numbers">
<div class="thumbnail">
<img data-src="holder.js/100%x180" alt="100%x180"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMyMSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEyMS41NzAzMTI1IiB5PSI5MCIgc3R5bGU9ImZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxNXB0O2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjMyMXgxODA8L3RleHQ+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="caption">
<h3>图片标题内容<span class="badge">{{item}}</span></h3>
</div>
</div>
</div>
</div>
controller:
angular.module('myApp')
.controller('aboutController', function ($scope, $timeout) {
console.info('about.js');
$scope.numbers = [];
$timeout(function () {
showInit();
}, 500);
function showInit() {
for (var i = 0; i < 5; i++) {
(function (i) {
$timeout(function () {
$scope.numbers.push(i);
}, i * 500);
})(i);
}
}
});
其他省略。
显示结果:
更多源代码地址:
http://git.oschina.net/tiama3798/AngularJsDemo/tree/ngAnimate
更多: