Merge pull request #28 from weijhfly/dev

fixed #27
weijhfly · Sep 27, 2019 · 05c4464 · 05c4464
2 parents a0d04ae + 37e38b0
commit 05c4464
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 47 deletions.
diff --git a/dist/rolldate.js b/dist/rolldate.js
diff --git a/dist/rolldate.min.js b/dist/rolldate.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rolldate",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "rolldate 多格式、功能强大的移动端日期选择插件",
   "main": "dist/rolldate.min.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -148,7 +148,7 @@ Rolldate.prototype = {
             ul += '</ul></div>'
         }
         let $html = `<div class="rolldate-mask"></div>
-            <div class="rolldate-panel fadeIn">
+            <div class="rolldate-panel">
                 <header>
                     <span class="rolldate-btn rolldate-cancel">${lang.cancel}</span>
                     ${lang.title}
@@ -176,17 +176,14 @@ Rolldate.prototype = {
 
             _this.scroll[FormatArr[i]] = new BScroll('#'+$id, {
                 wheel: {
-                  selectedIndex: 0,
-                  wheelWrapperClass: 'wheel-scroll',
-                  wheelItemClass: 'wheel-item'
-                },
-                probeType: 1
+                  selectedIndex: 0
+                }
               });
 
            let that = _this.scroll[FormatArr[i]],
                active = _this.$('#'+$id+' .active'),
                index = active? active.getAttribute('data-index') : Math.round(date.getMinutes()/config.minStep);
-
+ 
             that.wheelTo(index);
             // 滚动结束
             that.on('scrollEnd', () => {
@@ -210,6 +207,7 @@ Rolldate.prototype = {
             })
 
         }
+      _this.$('.rolldate-panel').className = 'rolldate-panel fadeIn';
   },
   $: function(selector,flag){
       if(typeof selector != 'string' && selector.nodeType){

diff --git a/src/rolldate.less b/src/rolldate.less
@@ -25,9 +25,8 @@ li {
     height: 100%;
     top: 0;
     left: 0;
-    background: #000;
-    opacity: 0.4;
     z-index: 999;
+    background-color: rgba(37,38,45,0.4);
   }
 
   .rolldate-panel {
@@ -38,9 +37,8 @@ li {
     height: 273px;
     z-index: 1000;
     background: #fff;
-    animation-duration: 300ms;
-    animation-delay: 0s;
-    animation-iteration-count: 1;
+    transition: all .3s ease-in-out;
+    transform: translate3d(0, 273px, 0);
   }
 
   .rolldate-btn {
@@ -116,30 +114,11 @@ li {
   }
 
   .fadeIn {
-    animation-name: fadeIn;
+   transform: translate3d(0, 0, 0);
   }
 
   .fadeOut {
-    animation-name: fadeOut;
-  }
-  @keyframes fadeIn {
-    from {
-      bottom: -273px;
-    }
-
-    to {
-      bottom: 0;
-    }
-  }
-  @keyframes fadeOut {
-    from {
-      bottom: 0;
-    }
-
-    to {
-      bottom: -273px;
-      display: none;
-    }
+    transform: translate3d(0, 273px, 0);
   }
 }
 @media screen and (max-width: 414px) {