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指令
}, 1500); }); }); } };});angular.element('.pageload').removeClass('pageload');
数据请求一般都会用到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(); }); } } } }; });
<div class="pageload"> 页面首次加载的动画 </div>
<div class="pageloading"> 页面切换的动画 </div>
<div render-finish="请求数据加载完毕后执行的函数,这里就可以控制页面动画消失了" ng-repeat="">请求数据加载完毕后执行的函数,这里就可以控制页面动画消失了,1.5s还未渲染完毕,动画也会消失(pageloading)
</div>