横向滑动模式演化

容器整体滑动：只滑动外包裹wrap，里面的li相对wrap定位，水平排列即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    header,footer{
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #fff;
    }
    header{
        position: relative;
        top: 0;
        z-index: 10;
        width: 100%;
        background-color: tan;
    }
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: black;
    }
    section{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .wrap{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: translate3d(0,0,0);/*激活GPU 3D加速*/
        -webkit-backface-visibility: hidden;

        -webkit-transition:300ms;
    }
    .wrap li{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 400px;
        font-size: 72px;
        color: #000;
        text-align: center;
    }
    .wrap li:nth-child(1){
        left: 0;
        background-color: rgba(235,214,142,.4);
    }
    .wrap li:nth-child(2){
        left: 100%;
        background-color: rgba(26,141,110,.4);
    }
    .wrap li:nth-child(3){
        background-color: rgba(180,195,81,.4);
        left: 200%;
    }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <ul class="wrap">
            <li><b>A</b></li>
            <li><b>B</b></li>
            <li><b>C</b></li>
        </ul>
    </section>
    <footer>footer</footer>
    <script src="zepto.min.js"></script>
    <script>
    var aB=$("b");
    var oWrap=$(".wrap");

    // for(var i=0;i<aB.length;i++){
    //     aB[i].index=i;
    //     aB[i].onclick=function(){
    //         if(this.index==0){
    //             $(".wrap").css("-webkit-transform","translate3d(-100%,0,0)");
    //         }
    //         else if(this.index==1){
    //             $(".wrap").css("-webkit-transform","translate3d(-200%,0,0)");
    //         }
    //         else if(this.index==2){
    //             $(".wrap").css("-webkit-transform","translate3d(0,0,0)");
    //         }
    //     };
    // }

    aB.each(function(index,ele){
        //console.log(index,ele);
        $(ele).attr("index",index);
        $(this).on('click',function(){    //$(ele)
            switch(index){
                case 0:
                    $(".wrap").css("-webkit-transform","translate3d(-100%,0,0)");
                break;
                case 1:
                    $(".wrap").css("-webkit-transform","translate3d(-200%,0,0)");
                break;
                case 2:
                    $(".wrap").css("-webkit-transform","translate3d(0,0,0)");
                break;
            }
        });
    });
    </script>
</body>
</html>

单个页面滑动：点击的一刻，隐藏当前，显示下一个li并相对于wrap绝对定位，top:0，left:0，并同时加上运动动画，从wrap的一半开始向左运动，运动完毕后隐藏当前li，并删除运动过来li的绝对定位和动画，为下次动画做准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    header,footer{
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #fff;
        z-index: 99;
    }
    header{
        position: relative;
        top: 0;
        width: 100%;
        background-color: tan;
    }
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: black;
    }
    section{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .wrap{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    li{            /*这里为毛不能用.wrap li 呢*/
        position: relative;
        width: 100%;
        height: 100%;
        display: none;

        line-height: 400px;
        font-size: 72px;
        color: #000;
        text-align: center;
    }
    .wrap li:nth-child(1){
        display: block;
        background-color: rgba(235,214,142,.4);
    }
    .wrap li:nth-child(2){
        background-color: rgba(26,141,110,.4);
    }
    .wrap li:nth-child(3){
        background-color: rgba(180,195,81,.4);
    }

    .ani{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 88;

        -webkit-transform: translate3d(0,0,0);
        -webkit-backface-visibility:hidden;
    }
    @-webkit-keyframes rightin{
        from{
            -webkit-transform:translateX(50%);
            opacity: 0;
        }
        to{
            -webkit-transform:translateX(0);
            opacity: 1;
        }
    }
    .rightin{
        -webkit-animation: rightin 350ms ease-in-out;
    }
    @-webkit-keyframes rightout{
        from{
            -webkit-transform:translateX(-50%);
            opacity: 0;
        }
        to{
            -webkit-transform:translateX(0);
            opacity: 1;
        }
    }
    .rightout{
        -webkit-animation: rightout 350ms ease-in-out;
    }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <ul class="wrap">
            <li><b>A</b></li>
            <li><b>B</b></li>
            <li><b>C</b></li>
        </ul>
    </section>
    <footer>footer</footer>
    <script src="zepto.min.js"></script>
    <script>
    var aB=$("b");
    var oWrap=$(".wrap");
    aB.each(function(index,ele){
        //console.log(index,ele);
        $(ele).attr("index",index);
        $(this).on('click',function(){    //$(ele)
            switch(index){

                case 0:
                    var _this=$(this);
                    _this.parent().next().show().addClass('ani rightin');
                    setTimeout(function(){
                        _this.parent().hide();
                        _this.parent().next().removeClass('ani rightin');
                    },350);
                break;
                case 1:
                    var _this=$(this);
                    _this.parent().next().show().addClass('ani rightin');
                    setTimeout(function(){
                        _this.parent().hide();
                        _this.parent().next().removeClass('ani rightin');
                    },350);
                break;
                case 2:
                    var _this=$(this);
                    _this.parent().prev().prev().show().addClass('ani rightin');
                    setTimeout(function(){
                        _this.parent().hide();
                        _this.parent().prev().prev().show().removeClass('ani rightin');
                    },350);
                break;
            }
        });
    });
        
                    

    </script>
</body>
</html>

双页联动动画：点击的一刻，下一个li显示并translate至和第一个li水平，同时运动这两个li，运动完毕后归位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    header,footer{
        height: 54px;
        line-height: 54px;
        text-align: center;
        color: #fff;
        z-index: 99;
    }
    header{
        position: fixed;
        top: 0;
        width: 100%;
        background-color: tan;
    }
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: black;
    }
    html,body{
        height: 100%;
    }
    section{
        position: relative;
        height: 100%;
    }

    .wrap{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    li{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;

        line-height: 400px;
        font-size: 72px;
        color: #000;
        text-align: center;
    }
    .wrap li:nth-child(1){
        display: block;
        background-color: rgba(235,214,142,.4);
    }
    .wrap li:nth-child(2){
        background-color: rgba(26,141,110,.4);
    }
    .wrap li:nth-child(3){
        background-color: rgba(180,195,81,.4);
    }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <ul class="wrap">
            <li><b>A</b></li>
            <li><b>B</b></li>
            <li><b>C</b></li>
        </ul>
    </section>
    <footer>footer</footer>
    <script src="zepto.min.js"></script>
    <script>
    var aB=$("b");
    var oWrap=$(".wrap");
    aB.each(function(index,ele){
        //console.log(index,ele);
        $(ele).attr("index",index);
        $(this).on('click',function(){    //$(ele)
            switch(index){

                case 0:
                    var _this=$(this);
                    _this.parent().next().css({
                        "display":"block",
                        "-webkit-transform":"translateX(100%)"
                    });
                    setTimeout(function(){
                        _this.parent().next().css({
                            "-webkit-transform":"translateX(0)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                        _this.parent().css({
                            "-webkit-transform":"translateX(-100%)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                    },0);

                    setTimeout(function(){
                        _this.parent().next().css({
                            '-webkit-transform':'',
                            '-webkit-transition' : ''
                        });
                          _this.parent().css({
                              'display':'none',
                              '-webkit-transform':'',
                              '-webkit-transition':''
                          });
                    },350);
                break;
                case 1:
                    var _this=$(this);
                    _this.parent().next().css({
                        "display":"block",
                        "-webkit-transform":"translateX(100%)"
                    });
                    setTimeout(function(){
                        _this.parent().next().css({
                            "-webkit-transform":"translateX(0)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                        _this.parent().css({
                            "-webkit-transform":"translateX(-100%)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                    },0);

                    setTimeout(function(){
                        _this.parent().next().css({
                            '-webkit-transform':'',
                            '-webkit-transition' : ''
                        });
                          _this.parent().css({
                              'display':'none',
                              '-webkit-transform':'',
                              '-webkit-transition':''
                          });
                    },350);
                break;
                case 2:
                    var _this=$(this);
                    _this.parent().prev().prev().css({
                        "display":"block",
                        "-webkit-transform":"translateX(100%)"
                    });
                    setTimeout(function(){
                        _this.parent().prev().prev().css({
                            "-webkit-transform":"translateX(0)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                        _this.parent().css({
                            "-webkit-transform":"translateX(-100%)",
                            "-webkit-transition":"-webkit-transform 250ms ease-out 0ms"
                        });
                    },0);

                    setTimeout(function(){
                        _this.parent().prev().prev().css({
                            '-webkit-transform':'',
                            '-webkit-transition' : ''
                        });
                          _this.parent().css({
                              'display':'none',
                              '-webkit-transform':'',
                              '-webkit-transition':''
                          });
                    },350);
                break;
            }
        });
    });
    </script>
</body>
</html>