侧边栏 返回效果

@@ -31,7 +31,7 @@ lazyLoad($('img.lazy'));
 $('.nav-btn').on('tap', function (event) {
     if (!$(this).hasClass('menu-open')) {
         $('.mobile-wrap').addClass('menu-open');
-        $('.overlay').addClass('show');
+        $('.overlay').show().css('opacity', 0.3);
         $('.side-nav').addClass('on');
 
         //设置boy高宽，页面不能上下滑动
@@ -48,13 +48,16 @@ $('.nav-btn').on('tap', function (event) {
 $('.mobile-wrap').on('tap', function () {
     if ($(this).hasClass('menu-open')) {
         $('.mobile-wrap').removeClass('menu-open');
-        $('.overlay').removeClass('show');
+        $('.overlay').css('opacity', 0);
         $('.sub-nav').removeClass('show');
         $('.side-nav').removeClass('on');
         $('body').css({
             height: 'auto',
             overflow: 'auto'
         });
+        setTimeout(function() {
+            $('.overlay').hide();
+        }, 300);
     }
 });
 

@@ -10,12 +10,11 @@
     position: relative;
     z-index: 2;
     background: #f0f0f0;
-    @include transition(transform .3s);
+    @include transition(transform .3s  ease-out);
 }
 
 .mobile-wrap.menu-open {
     @include transform(translateX(540rem / $pxConvertRem));
-    @include transition(transform .3s);
 }
 
 
@@ -27,10 +26,12 @@
     right: 0;
     bottom: 0;
     background: #000;
-    opacity: 0.3;
+    opacity: 0;
     z-index: 99;
+    @include transition(opacity 1s);
 }
 
 .overlay.show {
     display: block;
+    opacity: 0.3;
 }

 .side-nav {
-    display: none;
+    // display: none;
     background: #fff;
     position: fixed;
     top: 0;
@@ -8,6 +8,8 @@
     left: 0;
     z-index: 1;
     overflow: hidden;
+    @include transform(translateX(-540rem / $pxConvertRem));
+    @include transition(all .3s ease-out);
 
     ul {
         background: #f0f0f0;
@@ -103,20 +105,22 @@
 }
 
 .side-nav.on {
-    display: block;
+    // display: block;
+    @include transform(translateX(0rem / $pxConvertRem));
 }
 
 .sub-nav {
+    // display: none;
     position: fixed;
     top: 0;
     right: 100rem / $pxConvertRem;
     left: 0;
     bottom: 0;
+    width: 100%;
     background: #fff !important;
-    z-index: 2;
-
-    @include transform(translateX(100%));
+    // z-index: 2;
 
+    @include transform(translateX(540rem / $pxConvertRem));
     @include transition(transform 0.3s);
 
     li {