使用css3中transition的页面切换

精选转载

肖肖123 2012-07-30 10:58:26

文章标签 css3 文章分类 Java 后端开发

一：简述

点击文本框EditText,系统会自动弹出软键盘（其本质是一个Dialog），这必然会引起当前Activity主窗口的大小调整

而Android提供了不同的可选模式去调整活动窗口的大小，与之相关的属性为：android:windowSoftInputMode，当然具体的实现是由系统完成的

可以在清单文件Manifest.xml中的Activity标签内设置

如：android:windowSoftInputMode="stateUnspecified|adjustPan"

该属性可选的值有两部分，一部分为软键盘的状态控制，另一部分是活动主窗口的调整。前一部分本文不做讨论，请读者自行查阅android文档。

上一篇文章，我从教程中学到了使用css3中transition的页面切换，而这次呢，我就稍微使用这个方法稍做一些少少改动，我的想法是将所有层都叠在一起，一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办？我就弄多了一个可以重新来过的按钮。最后总觉得美中不足，只有向下一页的翻动，如果想返回上一页的话，还要重新来过，为此我又新增加多一个按钮，按钮的动画我还是选择了Javascript来控制。

      首先看看效果图

     demo地址：http://zhuyingyan.github.com/myfavourite/update.html

这里我还弄的比较简单，还没有加上内容。

首先是html，

<div id="mylife">            <ul>                                <li id="pageFour" class="panel">                    <div class="content">                        <h2>page Four</h2>                        <p>Some content ssss</p>                    </div>                </li>                <li id="pageThree" class="panel">                    <div class="content">                        <h2>Page Three</h2>                        <p>Some content ssss</p>                    </div>                </li>                <li id="pageTwo" class="panel">                    <div class="content">                        <h2>Page Two</h2>                        <p>Some content ssss</p>                    </div>                </li>                                <li id="pageOne" class="panel">                    <div class="content">                        <h2>Page one</h2>                        <p>Some content ssss</p>                    </div>                </li>                <li id="pageTop" class="panel">                    <div class="content">                        <p class="c-special">to my favourite person：</p>                        <h2>Roger Federer</h2>                        <p>Some content ssss</p>                    </div>                </li>                            </ul>        </div>        <div id="header">            <ul id="navigation">                <li><a id="perviousPage" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">pervious page</a></li>                <li><a id="nextPage" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">next page</a></li>                <li><a id="again" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">again</a></li>                            </ul>        </div>

      我把原本的内容页的div结构，改成ul，li结构。不过这里有点不太合理的地方就是我把页数在html中反过来写了，就是说我最后一页的div层放在第一个li里面。这个往后再做修改，这也关联到javascript的修改。

      接着是css代码，跟之前的css并没有太大改动，主要是按钮的位置做了调整，还有使用javascript增加class的class定义。

.panelclick{    margin-top:-150%;    background:#fff;    -webkit-transition:all 1.8s ease-in-out;    -moz-transition:all 1.8s ease-in-out;    -o-transition:all 1.8s ease-in-out;    -ms-transition:all 1.8s ease-in-out;    transition:all 1.8s ease-in-out;}#navigation .linkClick{    background:#000;    color:#fff;}

最后是javascript代码：

var pageChange = (function(){            /**            * listClickID 取得放着全部页面的ID号            * tagName     每个页面放于的标签            * i           这个比较重要是当前第i个页面，从0开始到length-1            * length      页面的个数            * nextPageId 下一页按钮的ID号            * again       重新来过按钮的ID号            * perviousPage上一页按钮的ID号            *             *              */            var listClickID,tagName,nextPageId,againId,perviousPageId;               var listClick=document.getElementById(listClickID||"mylife").getElementsByTagName(tagName||"li");            var i=0,length=listClick.length;            var nextPage=document.getElementById(nextPageId||"nextPage");            var again=document.getElementById(againId||"again");            var perviousPage=document.getElementById(perviousPageId||"perviousPage");            /**            * init        获取下一页并加上className实现动画效果            */            var init=function(){                                                                                    var id=this.id;                            if(i>=length){                                return false;                            }                            var block=listClick[length-i-1];                            i++;                                                        block.style.MozTransitionDelay="0s";                            block.style.WebkitTransitionDelay="0s";                            if(block.className.indexOf("panelclick")==-1)                                block.className+=" panelclick";                                };            /**            * restart       页面都从上往下回来，而且是有层次的一个接着一个，这里我就用了延时            */            var restart=function(){                    i=0;                    var j=0;                    for(;i < length;i++){                        var block=listClick[i];                        console.log(block);                        if(block.className.indexOf("panelclick")!=-1)                            {                                block.className=block.className.replace(" panelclick","");                                block.style.MozTransitionDelay=j+"s";                                block.style.WebkitTransitionDelay=j+"s";                                j++;                            }                    }                    j=0;                    i=0;            };            /**            * previous        获取上一页并删去className实现动画效果            */            var previous=function(){                                            if((length-i)>length-1){                            return false;                        }                        var block=listClick[length-i];                        console.log(block);                        if(block.className.indexOf("panelclick")!=-1)                        {                            block.className=block.className.replace(" panelclick","");                            block.style.MozTransitionDelay="0s";                            block.style.WebkitTransitionDelay="0s";                        }                        i=i-1;                                };            return {                setListClick:function(listID){                    listClickID=listID;                    return this;                },                setTagName:function(tagname){                    tagName=tagname;                    return this;                },                setNextPageId:function(nid){                    nextPageId=nid;                    return this;                },                setAgainId:function(aid){                    againId=aid;                    return this;                },                setPerviousPageId:function(pid){                    perviousPageId=pid;                    return this;                },                /**                * 加入事件绑定，实现相关键盘，鼠标点击效果                */                mouseEvent:function(){                    var body=document.getElementsByTagName("body")[0];                    var that=this;                    body.addEventListener("keydown",function(event){                        console.log(event.keyCode);                        if(event.keyCode==37){                            previous();                        }                        else if(event.keyCode==39){                            init();                        }                    });                    perviousPage.addEventListener("click",function(event){                        previous();                    });                    nextPage.addEventListener("click",function(event){                        init();                    });                    again.addEventListener("click",function(event){                        restart();                    });                    return this;                }            }        }(pageChange || {}));        pageChange.mouseEvent();

    最后，小小的总结，由于思路有限，先是写这么多，之后希望能够努力拓展拓展，完善其中的内容。