select 框优化

 <div class="select">
 <div class="select">
     <ul>
     <ul>
         {{#each items}}
         {{#each items}}
-        <li class="item-li" key="{{key}}">{{val}}</li>
+        <li class="item-li {{#if disabled}} disabled {{/if}}" key="{{key}}" status="{{disabled}}">{{val}}</li>
         {{/each}}
         {{/each}}
         <li class="item-del">
         <li class="item-del">
             <span>取消</span>
             <span>取消</span>

@@ -28,40 +28,49 @@ function Select(items) {
     // 覆盖层
     // 覆盖层
     const overlay = new Overlay({
     const overlay = new Overlay({
         onClose: function() {
         onClose: function() {
+            elem.removeClass('slide-in');
             elem.hide();
             elem.hide();
         }
         }
     });
     });
 
 
-    $(del).click(function() {
+    const hide = function() {
+        elem.removeClass('slide-in');
         overlay.hide();
         overlay.hide();
         elem.hide();
         elem.hide();
-    });
+    }
 
 
-    return {
-        show: function(cb) {
-            if (elem.parent().length === 0) {
-                const lis = elem.find('.item-li');
+    const show = function(cb) {
+        if (elem.parent().length === 0) {
+            const lis = elem.find('.item-li');
 
 
-                lis.each(function() {
+            lis.each(function() {
+                if (!$(this).attr('status')) {
                     $(this).click(function(e) {
                     $(this).click(function(e) {
-                        overlay.hide();
-                        elem.hide();
+                        hide();
                         cb({
                         cb({
                             key: $(e.target).attr('key'),
                             key: $(e.target).attr('key'),
                             val: e.target.innerHTML
                             val: e.target.innerHTML
                         });
                         });
                     });
                     });
-                });
-                elem.appendTo('body').addClass('animation-target');
-            }
-
-            overlay.show();
-            elem.show();
-        },
-        hide: function() {
-            overlay.hide();
-            elem.hide();
+                }
+            });
+            elem.appendTo('body');
         }
         }
+
+        overlay.show();
+        elem.show();
+        setTimeout(() => {
+            elem.addClass('slide-in');
+        }, 200);
+    }
+
+    $(del).click(function() {
+        hide();
+    });
+
+    return {
+        show: show,
+        hide: hide
     };
     };
 }
 }
 
 

@@ -4,6 +4,8 @@
     width: 100%;
     width: 100%;
     background: #fff;
     background: #fff;
     z-index: 1001;
     z-index: 1001;
+    transform: translate3d(0, 100%, 0);
+    transition: all 0.1s ease-in-out;
 
 
     ul {
     ul {
         font-size: 34px;
         font-size: 34px;
@@ -15,10 +17,18 @@
             border-bottom: 1px solid #e0e0e0;
             border-bottom: 1px solid #e0e0e0;
         }
         }
 
 
+        .disabled {
+            color: #b0b0b0;
+        }
+
         .item-del {
         .item-del {
             margin-top: 10px;
             margin-top: 10px;
             border-top: 1px solid #e0e0e0;
             border-top: 1px solid #e0e0e0;
             color: #5c99e4;
             color: #5c99e4;
         }
         }
     }
     }
+
+    &.slide-in {
+        transform: translate3d(0, 0, 0);
+    }
 }
 }

@@ -62,7 +62,6 @@
                 let _this = this;
                 let _this = this;
 
 
                 genderSel.show(function(item) {
                 genderSel.show(function(item) {
-                    console.log(item)
                     _this.gender = item.val.toLowerCase();
                     _this.gender = item.val.toLowerCase();
                     _this.saveDetails({
                     _this.saveDetails({
                         nickname: _this.nickname,
                         nickname: _this.nickname,