AngularJS动画（二）

来源：互联网发布：外汇手机交易软件编辑：程序博客网时间：2024/06/05 09:24

一、官方给的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
更多：

ng-switch指令

ng-if指令

AngularJS动画（一）

0 0