使用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>
其实这些都是简单的方式去使用插件,但由于他们配合起来使用就变复杂了一些。
时间: 2024-10-11 08:09:44