本质上是一个独立层（DIV或SECTION等），初始向右对齐，宽度为0，完全打开时变为100%。因此需要定义两个css类。
（初始）关闭状态：
.i-page-slide {
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 0;
height: 100%;
background-color: #f5f5f5;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
开启状态：
.i-page-open {
width: 100%;
-webkit-transform: translate(0);
transform: translate(0);
}
因此打开浮动页面的方法是：dom.addClass('i-page-open')
关闭的方法则是：dom.removeClass('i-page-open')
一些细节：
- 打开浮动页面时，最好隐藏后面的非浮动内容区
- 打开浮动页面时，最好给body设置属性
overflow: hidden，待全部关闭时，再撤销 - 在宽屏（如平板）上，如果想做居中效果，可以利用media query：
/*窗口过宽时整体居中显示*/
[[@media](http://my.oschina.net/u/1447355)](http://my.oschina.net/u/1447355) (min-width: 481px) {
.i-page-slide {
left: 50%;
margin-left: -240px;
}
}
