网页从右至左滑出效果

最新推荐文章于 2023-03-03 15:59:56 发布

转载最新推荐文章于 2023-03-03 15:59:56 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2324376/blog/710424

2019独角兽企业重金招聘Python工程师标准>>>

本质上是一个独立层（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;
    }
}

转载于:https://my.oschina.net/u/2324376/blog/710424