网页从右至左滑出效果

原创
2016/07/12 16:04
阅读数 272

本质上是一个独立层(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;
    }
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部