angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用，可以实现页面切换的效果。
如果有使用过swiper，就知道这个效果是怎么样的。
代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-route.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
<style>
body{
margin:0;
padding:0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
} #p01{
width: 100%;
height: 100%;
background: red;
}
#p02{
width: 100%;
height: 100%;
background: green;
}
#p03{
width: 100%;
height: 100%;
background: blue;
}
#p04{
width: 100%;
height: 100%;
background: pink;
}
#p05{
width: 100%;
height: 100%;
background: skyblue;
}
/*以下的ngAniamte插件的关键，因为它靠css来实现动画，
可以不编写js代码；
流程：
为动画的容器添加选择器：如.container
然后再这个选择器上实现动画
.ng-enter出现时的样式->>
(它们之间动画效果，需要自己去编写如添加过渡效果transition，在选择器上编写)
->>.ng-enter-active出现后的样式
.ng-leave离开时的样式-->>.ng-leave-active离开后的样式
这里ng-show无效
ng-if会移除dom，生成dom，而ng-show只是改变其display属性。
display来实现显示隐藏，在渲染过程中会对动画效果无效化
而它和ng-view，就无需添加这个指令，因为这个页面的切换也是动态删除和添加
*/
.container{
width: 100%;
height: 100%;
transition: 1s all;
position: absolute;
overflow: hidden;
}
.container.ng-enter{
left: 100%;
}
.container.ng-enter-active{
left:0%;
}
.container.ng-leave{
left: 0%;
}
.container.ng-leave-active{
left: -100%;
}
</style>
<script>
window.onload=function(){
document.body.style.width=view().w+"px";
document.body.style.height=view().h+"px";
}
// 全屏可视区的宽高
function view(){
return {w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight};
}
</script>
</head>
<body>
<div ng-controller="myCon" class="wrap">
<!-- 使用锚点实现路径变换，哈希值 -->
<a href="#shouye">首页</a>
<a href="#ziyemian01">子页面01</a>
<a href="#ziyemian02">子页面02</a>
<a href="#ziyemian03">子页面03</a>
<a href="#ziyemian04">子页面04</a>
<!-- ng-view配合ngRoute一起使用，实现单页面效果 -->
<div class="container" ng-view ></div>
</div>
<script>
// 依赖注入插件ngAnimate,ngRoute
var myApp=angular.module("myApp",["ngAnimate","ngRoute"])
// 在配置中规定路由规则
.config(['$routeProvider',function($routeProvider){ $routeProvider
.when('/shouye',{
template : '<p id="p01">首页的内容</p>'
})
// 路由路径
.when('/ziyemian01',{
template : '<p id="p02">子页面01</p>'
})
// 路由路径
.when('/ziyemian02',{
template : '<p id="p03">子页面02</p>'
})
// 路由路径
.when('/ziyemian03',{
template : '<p id="p04">子页面03</p>'
})
// 路由路径
.when('/ziyemian04',{
template : '<p id="p05">子页面04</p>'
})
// 重定向路径，就是默认路径
.otherwise({
redirectTo : '/shouye'
}); }])
.controller("myCon",["$scope",function($scope){ }])
</script>
</body>
</html>
ngRoute方面的使用：传送门
ngAnimate和ng-repeat配合：
代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
<style>
.listBox{
transition: all 1s;
}
.listBox.ng-enter{
opacity: 0;
}
.listBox.ng-enter-active{
opacity: 1;
}
.listBox.ng-leave{
display: none;
}
/*对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
*/
.listBox.ng-enter-stagger{
animation-delay:100ms;
}
</style>
</head>
<body>
<div ng-controller="myCon">
<!-- ng-keyup事件指令 -->
<input type="text" ng-model="text" ng-keyup="change(text)">
<ul>
<li class="listBox" ng-repeat="k in dataArr">{{k}}</li>
</ul>
</div>
<script>
var myApp=angular.module("myApp",["ngAnimate"])
.controller("myCon",["$scope","$http",function($scope,$http){
$scope.change=function(val){
// $http和JQ里的$.ajax()工具使用方式类似
$http({
// 跨域请求方式
method:"JSONP",
// 百度搜索,数据接口
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=JSON_CALLBACK"
// 成功接受数据，第一个参数是数据（json格式）
// 这个函数可以接受四个参数，具体查看手册
}).success(function(data){
$scope.dataArr=data.s;
});
}
}])
</script>
</body>
</html>
ngAnimate简单的使用方式：
代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angularjs-v1.5.9.js"></script>
<script src="ngAnimate.js"></script>
<style>
.box{
width:100px;
height:100px;
background: red;
transition: 1s all;
}
.box.ng-enter{
opacity: 0;
}
.box.ng-enter-active{
opacity: 1;
}
.box.ng-leave{
opacity: 1;
}
.box.ng-leave-active{
opacity: 0;
}
</style>
</head>
<body>
<div ng-controller="myCon">
<!-- ng-model在复选框里使用时true，false值 -->
<input type="checkBox" ng-model="bTure">
<!-- 这里ng-show无效 -->
<!-- ng-if会移除dom，生成dom，而ng-show只是改变其display属性。 -->
<!-- display来实现显示隐藏，在渲染过程中会对动画效果无效化 -->
<div ng-if="bTure" class="box">{{bTure}}</div>
</div>
<script>
var myApp=angular.module("myApp",["ngAnimate"])
.controller("myCon",["$scope",function($scope){
$scope.bTure=true;
}])
</script>
</body>
</html>
其实这些都是简单的方式去使用插件，但由于他们配合起来使用就变复杂了一些。
angularjs之插件ngRoute和ngAnimate的更多相关文章
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- angularJS 常用插件指令
长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...
- 转AngularJS路由插件
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...
- AngularJs练习Demo17 ngRoute
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- AngularJS 路由：ng-route 与 ui-router
AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL. 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化, ...
- AngularJS Best Practices: ngRoute
app/----- components/---------- users/--------------- controllers/-------------------- users.control ...
- AngularJs练习Demo16 ngRoute
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- angularjs上传图片插件使用
一. angurlajs 相关 远程 jar 包 https://code.angularjs.org/angular-1.0.1.min.js 二. 正文 1. html 部分 <!-- 需要 ...
- angularJS的插件使用
$uibModal&&$uibModalInstance $uibModal和$uibModalInstance是一款angularJS的弹窗控件,github地址 http://an ...
随机推荐
- cocos2d 3.X Shader 变暗和变灰
转自http://www.waitingfy.com/archives/1741 1.为了节约一张图引发的Shader使用 我们注意到这个游戏当中经常使用一些按钮,美术会给两张图,一张稍微暗点,表示 ...
- 轻松创建R语言函数包
讲真,用R这么几年,始终未尝试过写自己的包,看来这就是我与真正程序员的差距了——编程习惯等于没有. 昨天一个偶然的机会想开始写自己的工具包,发现了前期教程的有一些过时.于是,写一个**windows* ...
- 黑马程序员+SQL基础（上）
黑马程序员+SQL基础 ---------------<a href="http://edu.csdn.net"target="blank">ASP ...
- linux系统添加硬盘方法
[root@wen /]# fdisk -l[root@wen /]# fdisk /dev/sdb[root@wen /]# mkfs -t ext3 -c /dev/sdb1[root@wen / ...
- 基于ejbca构建独立ca系统
ejbca,是一个CA(Certificate Authority)系统软件,CA是数字证书认证中心的简称,主要功能是管理数字证书,包括证书的颁发.销毁.更新等,ejbca实现了CA规范,因此可以用来 ...
- ASP.NET 5 入门 (2) – 自定义配置
ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext ...
- ENode 1.0 - 整体架构介绍
前言 今天是个开心的日子,又是周末,可以安心轻松的写写文章了.经过了大概3年的DDD理论积累,以及去年年初的第一个版本的event sourcing框架的开发以及项目实践经验,再通过今年上半年利用业余 ...
- 【T-SQL基础】01.单表查询-几道sql查询题
概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...
- 5天玩转C#并行和多线程编程 —— 第五天 多线程编程大总结
5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...
- Java提高篇(三二)-----List总结
前面LZ已经充分介绍了有关于List接口的大部分知识,如ArrayList.LinkedList.Vector.Stack,通过这几个知识点可以对List接口有了比较深的了解了.只有通过归纳总结的知识 ...