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

欧阳锋

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

先来个效果图：

直接列出实现代码：

1.html

1. <div class="left_slide_center_nav">
   
2.     <!--蒙层-->
   
3.     <div class="center_mask"></div>
   
4.     <div class="center_content">
   
5.         <!-- 内容 -->
   
6.     </div>
   
7. </div>

复制代码

2.css

1. /**蒙层*/
   
2. .left_slide_center_nav .center_mask {
   
3.     position: fixed;
   
4.     top: 0;
   
5.     left: 0;
   
6.     right: 0;
   
7.     bottom: 0;
   
8.     background: rgba(0,0,0,.6);
   
9.     z-index: 1000;
   
10.     display: none;
    
11. }
    
12. 
    
13. /**内容*/
    
14. .left_slide_center_nav .center_content {
    
15.     position: fixed;
    
16.     width: 79%;
    
17.     top: 0;
    
18.     bottom: 0;
    
19.     transition: all .4s;
    
20.     -moz-transition: all .4s;
    
21.     -webkit-transition: all .4s;
    
22.     -o-transition: all .4s;
    
23.     -os-transition: all .4s;
    
24.     z-index: 99999;
    
25.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
26.     overflow-y: scroll;
    
27.     background: #fff;
    
28.     -os-transform: translateX(-120%);
    
29.     transform: translateX(-120%);
    
30. }
    
31. 
    
32. /**显示蒙层和内容 使用父级.show样式控制*/
    
33. .left_slide_center_nav.show .center_mask {
    
34.     display: block;
    
35. }
    
36. .left_slide_center_nav.show .center_content {
    
37.     -os-transform: translateX(0);
    
38.     transform: translateX(0);
    
39. }

复制代码

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

1. //显示：
   
2. $(".left_slide_center_nav").addClass("show");
   
3. 
   
4. 
   
5. //点击蒙层关闭：
   
6. $(".left_slide_center_nav").on("click",".center_mask",function(){
   
7.     //隐藏：
   
8.     $(".left_slide_center_nav").removeClass("show");
   
9. });

复制代码

注意重点：

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%);

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