[Improvement] CellSwipe: optimzie animation fluency (#685)

packages/cell-swipe/index.vue

@@ -24,6 +24,8 @@
 import { create } from '../utils';
 import Clickoutside from '../utils/clickoutside';
 
+const THRESHOLD = 0.15;
+
 export default create({
   name: 'van-cell-swipe',
 
@@ -45,14 +47,16 @@ export default create({
 
   data() {
     return {
-      offset: 0
+      offset: 0,
+      draging: false
     };
   },
 
   computed: {
     wrapperStyle() {
       return {
-        transform: `translate3d(${this.offset}px, 0, 0)`
+        transform: `translate3d(${this.offset}px, 0, 0)`,
+        transition: this.draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
       };
     }
   },
@@ -70,16 +74,19 @@ export default create({
     swipeMove(offset = 0) {
       this.offset = offset;
       offset && (this.swiping = true);
+      !offset && (this.opened = false);
     },
 
     swipeLeaveTransition(direction) {
       const { offset, leftWidth, rightWidth } = this;
+      const threshold = this.opened ? (1 - THRESHOLD) : THRESHOLD;
+
       // right
-      if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
+      if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) {
         this.swipeMove(-rightWidth);
         this.resetSwipeStatus();
       // left
-      } else if (direction < 0 && offset > leftWidth * 0.4 && leftWidth > 0) {
+      } else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) {
         this.swipeMove(leftWidth);
         this.resetSwipeStatus();
       } else {
@@ -88,17 +95,16 @@ export default create({
     },
 
     startDrag(event) {
+      this.draging = true;
       this.startX = event.touches[0].pageX;
       this.startY = event.touches[0].pageY;
+
+      if (this.opened) {
+        this.startX -= this.offset;
+      }
     },
 
     onDrag(event) {
-      if (this.opened) {
-        !this.swiping && this.swipeMove();
-        this.opened = false;
-        return;
-      }
-
       const offsetTop = event.touches[0].pageY - this.startY;
       const offsetLeft = event.touches[0].pageX - this.startX;
       if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
@@ -118,6 +124,7 @@ export default create({
     },
 
     endDrag() {
+      this.draging = false;
       if (this.swiping) {
         this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
       };

packages/vant-css/src/cell-swipe.css

@@ -4,12 +4,6 @@
   overflow: hidden;
   position: relative;
 
-  &__wrapper,
-  &__left,
-  &__right {
-    transition: transform .15s ease-in-out;
-  }
-
   &__left,
   &__right {
     top: 0;