網頁從右至左滑出效果 原

本質上是一個獨立層（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;
    }
}