perf: enhance animation fluency

onlyhom · Aug 25, 2022 · 488c6dd · 488c6dd
1 parent 66ab827
commit 488c6dd
Showing 1 changed file with 19 additions and 33 deletions.
diff --git a/src/ms-core.ts b/src/ms-core.ts
@@ -706,6 +706,20 @@ export default class MobileSelect {
         }
         break;
 
+      case "touchmove":
+      case "mousemove":
+        event.preventDefault();
+        if (event.type === "mousemove" && !this.enableClickStatus) break;
+        this.moveY = Math.floor(
+          event instanceof TouchEvent ? event.touches[0].clientY : event.clientY
+        );
+        this.offsetY = (this.moveY - this.preMoveY) * this.config.scrollSpeed;
+        this.updateCurDistance(theSlider, index);
+        this.curDistance[index] = this.curDistance[index] + this.offsetY;
+        this.movePosition(theSlider, this.curDistance[index]);
+        this.preMoveY = this.moveY;
+        break;
+
       case "touchend":
       case "mouseup":
         theSlider.style.transition = "transform 0.18s ease-out";
@@ -720,8 +734,7 @@ export default class MobileSelect {
           this.optionHeight;
 
         if (this.offsetSum == 0) {
-          // offsetSum为0, 相当于点击事件
-          // 0 1 [2] 3 4
+          // offsetSum为0, 相当于点击事件 点击了中间的选项
           const clickOffetNum = Math.floor(
             (window.innerHeight - this.moveEndY) / 40
           );
@@ -751,26 +764,13 @@ export default class MobileSelect {
           // 修正位置
           this.updateCurDistance(theSlider, index);
           this.curDistance[index] = this.fixPosition(this.curDistance[index]);
-          this.movePosition(theSlider, this.curDistance[index]);
-
-          // 反弹
-          if (
-            this.curDistance[index] + this.offsetSum >
-            2 * this.optionHeight
-          ) {
+          if (this.curDistance[index] > 2 * this.optionHeight) {
             this.curDistance[index] = 2 * this.optionHeight;
-            setTimeout(() => {
-              this.movePosition(theSlider, this.curDistance[index]);
-            }, 100);
-          } else if (
-            this.curDistance[index] + this.offsetSum <
-            this.oversizeBorder
-          ) {
+          } else if (this.curDistance[index] < this.oversizeBorder) {
             this.curDistance[index] = this.oversizeBorder;
-            setTimeout(() => {
-              this.movePosition(theSlider, this.curDistance[index]);
-            }, 100);
           }
+          this.movePosition(theSlider, this.curDistance[index]);
+
           this.config.transitionEnd?.(
             this.getIndexArr(),
             this.getCurValue(),
@@ -791,20 +791,6 @@ export default class MobileSelect {
         }
 
         break;
-
-      case "touchmove":
-      case "mousemove":
-        event.preventDefault();
-        if (event.type === "mousemove" && !this.enableClickStatus) break;
-        this.moveY = Math.floor(
-          event instanceof TouchEvent ? event.touches[0].clientY : event.clientY
-        );
-        this.offsetY = (this.moveY - this.preMoveY) * this.config.scrollSpeed;
-        this.updateCurDistance(theSlider, index);
-        this.curDistance[index] = this.curDistance[index] + this.offsetY;
-        this.movePosition(theSlider, this.curDistance[index]);
-        this.preMoveY = this.moveY;
-        break;
     }
   }
 }