zoukankan      html  css  js  c++  java
  • 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;
             100%;
            height: 100%;
            overflow: hidden;
        }
        
        #p01{
             100%;
            height: 100%;
            background: red;
        }
        #p02{
             100%;
            height: 100%;
            background: green;
        }
        #p03{
             100%;
            height: 100%;
            background: blue;
        }
        #p04{
             100%;
            height: 100%;
            background: pink;
        }
        #p05{
             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{
             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{
            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>

    其实这些都是简单的方式去使用插件,但由于他们配合起来使用就变复杂了一些。

  • 相关阅读:
    zoj 3279 线段树 OR 树状数组
    fzu 1962 树状数组 OR 线段树
    hdu 5057 块状链表
    hdu3487 Play with Chain
    bzoj 1588营业额统计(HNOI 2002)
    poj2823 Sliding Window
    poj2828 Buy Tickets
    poj2395 Out of Hay
    poj3667 Hotel
    poj1703 Lost Cows
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/6035427.html
Copyright © 2011-2022 走看看