本文共 2110 字，大约阅读时间需要 7 分钟。

一、官方给的ngAnimate库的使用

演示地址：

源代码地址：

二、完整的AngularJS动画+路由实例

路由配置动态加载视图和控制器

1.主页

引用：

   
    
    
        
     
首页
        
     
关于页面
        
     
网站地图
    
    
    
    
        
     
            
      
       模板内容
      
        
     
        
     
    
    
   

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');                    }                }            }        }    });});

视图：

这是home页面
   
    
    
             会员数量  
     {
  {item}}    
    
   

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);    }});

视图：

    这是关于我们页面
   
    
    
        
     
            
                  
      
                
       
图片标题内容{ {item}}
            
      
        
     
    
    
   

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);        }    }});

显示结果：