使用AngularJS实现可伸缩的页面切换的方法  更新时间:2015年06月19日 12:16:23   投稿:goldensun   这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。 演示: http://embed.plnkr.co/PqhvmW/preview 首先,标记:   既然ng-view使用进入/离开动画,那么就能简单地在DOM里使用两个 ng-view 元素来进行新视图切入和旧视图切出。因此,我们在使用相对定位的 page-container 元素里,使用绝对定位建立了ng-view,从而支持任意一种定位切换。 ‘go’ 方法 在单页面应用里,我们仍想启用通过URL导航和确保浏览器的回退和下一步按钮如预期的功能。所以一旦我们在$routeProvider设好我们的路由,模板,控制器(可选的解析),我们可以在一个 ng-click 里使用一个相对路径来直接切换页面:   Go to page 2 那样也可以工作,但是我们需要在ng-view 硬编码指定切换一个class 。以此代替,让我们在 $rootScope 上创建一个 ‘go’ 方法,可以让我们指定一个路径和一个像这样的切换:   Go to page 2 这是我们 $rootScope ‘go’ 方法:   $rootScope.go = function (path, pageAnimationClass) { if (typeof(pageAnimationClass) === ‘undefined’) { // Use a default, your choice $rootScope.pageAnimationClass = ‘crossFade’; } else { // Use the specified animation $rootScope.pageAnimationClass = pageAnimationClass; } if (path === ‘back’) { // Allow a ‘back’ keyword to go to previous page $window.history.back(); } else { // Go to the specified path $location.path(path); } }; 现在,任何你第二个参数指定的 切换类 将会添加到 ng-view 并且 go 方法将会用指定的第一个参数改变页面路径。 切换类 接下来要做的就是创建一个任意数量的切换类,并使用 ngAnimate module 提供的钩子,例如:   /* slideLeft */ .slideLeft { transition-timing-function: ease; transition-duration: 250ms; } .slideLeft.ng-enter { transition-property: none; transform: translate3d(100%,0,0); } .slideLeft.ng-enter.ng-enter-active { transition-property: all; transform: translate3d(0,0,0); } .slideLeft.ng-leave { transition-property: all; transform: translate3d(0,0,0); } .slideLeft.ng-leave.ng-leave-active { transition-property: all; transform: translate3d(-100%,0,0); } 您可能感兴趣的文章: JS代码实现页面切换效果 基于JS实现翻书效果的页面切换样式 简单实现js页面切换功能 javaScript实现鼠标在文字上悬浮时弹出悬浮层效果 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例 javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图) Vue.js鼠标悬浮更换图片功能 js制作的鼠标悬浮时产生的下拉框效果 js鼠标悬浮出现遮罩层的方法 JavaScript实现鼠标悬浮页面切换效果 JavaScript 动画 相关文章 AngularJS实现Input格式化的方法 这篇文章主要介绍了AngularJS实现Input格式化的方法,结合实例形式分析了AngularJS实现Input格式化的操作步骤与相关注意事项,需要的朋友可以参考下 2016-11-11 详解使用angular-cli发布i18n多国语言Angular应用 这篇文章主要介绍了详解使用angular-cli发布i18n多国语言Angular应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 AngularJs导出数据到Excel的示例代码 本篇文章主要介绍了AngularJs导出Excel的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 详谈angularjs中路由页面强制更新的问题 下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 详解angularJs中关于ng-class的三种使用方式说明 本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 AngularJS实现select的ng-options功能示例 这篇文章主要介绍了AngularJS实现select的ng-options功能,结合实例形式分析了AngularJS使用ng-options操作select列表的相关实现技巧,需要的朋友可以参考下 2017-07-07 Angular4学习笔记之新建项目的方法 本篇文章主要介绍了Angular4学习笔记之新建项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 老生常谈angularjs中的$state.go 下面小编就为大家带来一篇老生常谈angularjs中的$state.go。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 ng-alain表单使用方式详解 这篇文章主要介绍了ng-alain表单使用方式详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 angular学习之ngRoute路由机制 这篇文章主要介绍了angular学习之ngRoute路由机制,ngRoute是一个Module,提供路由和深层链接所需的服务和指令。有需要的可以了解一下。 2017-04-04 最新评论

AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。

演示: http://embed.plnkr.co/PqhvmW/preview

首先,标记:
 

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

既然ng-view使用进入/离开动画,那么就能简单地在DOM里使用两个 ng-view 元素来进行新视图切入和旧视图切出。因此,我们在使用相对定位的 page-container 元素里,使用绝对定位建立了ng-view,从而支持任意一种定位切换。

‘go’ 方法

在单页面应用里,我们仍想启用通过URL导航和确保浏览器的回退和下一步按钮如预期的功能。所以一旦我们在$routeProvider设好我们的路由,模板,控制器(可选的解析),我们可以在一个 ng-click 里使用一个相对路径来直接切换页面:
 

 <a ng-click="/page2">Go to page 2</a>

那样也可以工作,但是我们需要在ng-view 硬编码指定切换一个class 。以此代替,让我们在 $rootScope 上创建一个 ‘go’ 方法,可以让我们指定一个路径和一个像这样的切换:
 

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

这是我们 $rootScope ‘go’ 方法:
 

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};

现在,任何你第二个参数指定的 切换类 将会添加到 ng-view 并且 go 方法将会用指定的第一个参数改变页面路径。

切换类

接下来要做的就是创建一个任意数量的切换类,并使用 ngAnimate module 提供的钩子,例如:
 

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}

您可能感兴趣的文章:

  • JS代码实现页面切换效果
  • 基于JS实现翻书效果的页面切换样式
  • 简单实现js页面切换功能
  • javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
  • javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
  • Vue.js鼠标悬浮更换图片功能
  • js制作的鼠标悬浮时产生的下拉框效果
  • js鼠标悬浮出现遮罩层的方法
  • JavaScript实现鼠标悬浮页面切换效果
张贴在3