angularjs 首次加载页面 及页面切换的动画

angularjs提供了内置的函数让我们检测到页面的变化

$stateChangeStart   页面开始跳转

$stateChangeSuccess  页面跳转完毕

$viewContentLoaded   页面内容渲染完毕

可以轻松的用这些函数来做一些页面切换的动画,及收次加载的动画

首次加载动画指令  

首次进来时页面渲染完毕让.pageload消失 

app.directive('pageload',function($rootScope, $timeout) {
    return {
        restrict: 'EAC',
        link: function(scope, element) {
            $rootScope.$watch('$viewContentLoaded', function() {
                $timeout(function() {
                    angular.element('.pageload').fadeOut(1500); 
                });
            });
        }
    };
});

页面切换动画指令 

app.directive('pageloading',function($rootScope, $timeout) {
  return {
    restrict: 'EAC',
    link: function(scope, element) {
      $rootScope.$on('$stateChangeStart', function() {  //页面开始跳转
        $timeout(function() {
          element.removeClass('ng-hide');  //pageloading 开始显示
        });
      });
      $rootScope.$on('$stateChangeSuccess', function() {  //页面跳转完毕
        $rootScope.$watch('$viewContentLoaded', function() {  //监听页面 是否渲染完成 不包含数据请求部分
	//延时1.5秒是因为页面伴随着数据请求,下面会提到如何解决
          $timeout(function() {              element.addClass('ng-hide');  //pageloading 隐藏
		//删除页面首次加载的动画的class名 即删除pageload指令
		angular.element('.pageload').removeClass('pageload');
          }, 1500);        });      });    }  };});

数据请求一般都会用到ng-repeat 所以可以在ng-repeat后执行让页面切换动画消失,但是上面的1.5秒后消失不建议删除.

如果删除后,页面数据请求失败那么动画将不会消失导致无法看到页面

ngRepeat加载完毕后执行方法

app.directive('renderFinish', function($timeout) {
    return {
        restrict: 'EA',
        link: function(scope,element,attr) {
            if (scope.$last === true) {
                console.log(scope.$index);
                var finishFunc=scope.$parent[attr.renderFinish];
                if(finishFunc)
                {
                    $timeout(function () {
                        finishFunc();
                    });
                }
            }
        }
    };
});

html部分代码仅在首页写两个动画即可

<div class="pageload">
    页面首次加载的动画
</div>

<div class="pageloading">
    页面切换的动画
</div>

<div render-finish="请求数据加载完毕后执行的函数,这里就可以控制页面动画消失了" ng-repeat="">
	请求数据加载完毕后执行的函数,这里就可以控制页面动画消失了,1.5s还未渲染完毕,动画也会消失(pageloading)
</div>