前端特效：导航 、个人中心滑出（左滑、右滑、上滑、下滑）效果实现

前段时间做到微信开发，需要实现个人中心滑出效果，今天稍有空闲，记录一下实现方式。

先来个效果图：

 

直接列出实现代码：

1.html

<div class="left_slide_center_nav">
    <!--蒙层-->
    <div class="center_mask"></div>
    <div class="center_content">
        <!-- 内容 -->
    </div>
</div>

2.css

/**蒙层*/
.left_slide_center_nav .center_mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    display: none;
}

/**内容*/
.left_slide_center_nav .center_content {
    position: fixed;
    width: 79%;
    top: 0;
    bottom: 0;
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -os-transition: all .4s;
    z-index: 99999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    background: #fff;
    -os-transform: translateX(-120%);
    transform: translateX(-120%);
}

/**显示蒙层和内容 使用父级.show样式控制*/
.left_slide_center_nav.show .center_mask {
    display: block;
}
.left_slide_center_nav.show .center_content {
    -os-transform: translateX(0);
    transform: translateX(0);
}

3.js控制样式切换，显示和隐藏

//显示：
$(".left_slide_center_nav").addClass("show");


//点击蒙层关闭：
$(".left_slide_center_nav").on("click",".center_mask",function(){
    //隐藏：
    $(".left_slide_center_nav").removeClass("show");
});

 

着重点：

 1.初始样式中transform: translateX(-120%);的定义，以及show之后transform: translateX(0);的定义

 2.父级别.show样式的控制

 

注：

如果需要右往左滑出，css中的代码 transform: translateX(-120%) 可改为 transform: translateX(120%);参数值可自行修改。

如果需要上往下，或者下往上滑出，可以使用transform: translateY(-120%);  或者transform: translateY(120%);

如果需要实现斜着滑，可以transform: translate(150%,150%);

其他的就各位举一反三吧。