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

docs/demos/views/cell-swipe.vue

@@ -71,21 +71,18 @@ export default {
 .demo-cell-swipe {
   user-select: none;
 
-  .van-cell-swipe__left,
+  .van-cell-swipe {
-  .van-cell-swipe__right {
+    &__left,
+    &__right {
       color: #FFFFFF;
-      font-size: 16px;
+      font-size: 15px;
       width: 65px;
       height: 44px;
       display: inline-block;
       text-align: center;
       line-height: 44px;
+      background-color: #F44;
     }
-  .van-cell-swipe__left {
-    background-color: #FF4444;
-  }
-  .van-cell-swipe__right {
-    background-color: #84c483;
   }
 }
 </style>

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;

test/specs/cell-swipe.spec.js

@@ -1,6 +1,6 @@
 import CellSwipe from 'packages/cell-swipe';
 import { mount } from 'avoriaz';
-import { triggerTouch } from '../utils';
+import { triggerTouch, dragHelper } from '../utils';
 
 const defaultProps = {
   propsData: {
@@ -60,48 +60,40 @@ describe('CellSwipe', () => {
     });
   });
 
-  it('drag and reset left part', () => {
+  it('drag and show left part', () => {
     wrapper = mount(CellSwipe, defaultProps);
-
+    dragHelper(wrapper, 50);
-    triggerTouch(wrapper, 'touchstart', 0, 0);
+    expect(wrapper.vm.offset).to.equal(100);
-    triggerTouch(wrapper, 'touchmove', 10, 0);
-    triggerTouch(wrapper, 'touchmove', 30, 0);
-    triggerTouch(wrapper, 'touchend', 30, 0);
-    expect(wrapper.vm.offset).to.equal(0);
   });
 
-  it('drag and reset right part', () => {
+  it('drag and show right part', () => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
+    dragHelper(wrapper, -50);
-    triggerTouch(wrapper, 'touchmove', -10, 0);
+    expect(wrapper.vm.offset).to.equal(-100);
-    triggerTouch(wrapper, 'touchmove', -30, 0);
-    triggerTouch(wrapper, 'touchend', -30, 0);
-    expect(wrapper.vm.offset).to.equal(0);
   });
 
-  it('drag distance out of ranges', () => {
+  it('drag distance out of ranges', done => {
     wrapper = mount(CellSwipe, defaultProps);
 
     triggerTouch(wrapper, 'touchstart', 0, 0);
     triggerTouch(wrapper, 'touchmove', 1000, 0);
+    
+    setTimeout(() => {
       expect(wrapper.vm.offset).to.equal(0);
+      done();
+    });
   });
 
   it('drag and hide left part', (done) => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
+    dragHelper(wrapper, 50);
-    triggerTouch(wrapper, 'touchmove', 20, 0);
-    triggerTouch(wrapper, 'touchmove', 50, 0);
-    triggerTouch(wrapper, 'touchend', 50, 0);
     expect(wrapper.vm.offset).to.equal(100);
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.opened).to.be.true;
 
-      triggerTouch(wrapper, 'touchstart', 0, 0);
+      dragHelper(wrapper, -50);
-      triggerTouch(wrapper, 'touchmove', 1, 0);
-
       wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.offset).to.equal(0);
         expect(wrapper.vm.opened).to.be.false;
@@ -113,9 +105,7 @@ describe('CellSwipe', () => {
   it('drag vertical', () => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
+    dragHelper(wrapper, 0, 100);
-    triggerTouch(wrapper, 'touchmove', 0, 100);
-    triggerTouch(wrapper, 'touchend', 0, 100);
     expect(wrapper.vm.offset).to.equal(0);
   });
 

test/specs/datetime-picker.spec.js

@@ -56,8 +56,8 @@ describe('DatetimePicker', () => {
     });
 
     const [hour, minute] = wrapper.find('.van-picker-column ul');
-    dragHelper(hour, -50);
+    dragHelper(hour, 0, -50);
-    dragHelper(minute, -50);
+    dragHelper(minute, 0, -50);
 
     setTimeout(() => {
       expect(wrapper.vm.innerValue).to.equal('1:01');
@@ -78,9 +78,9 @@ describe('DatetimePicker', () => {
 
     setTimeout(() => {
       const [year, month, day] = wrapper.find('.van-picker-column ul');
-      dragHelper(year, -50);
+      dragHelper(year, 0, -50);
-      dragHelper(month, -50);
+      dragHelper(month, 0, -50);
-      dragHelper(day, -50);
+      dragHelper(day, 0, -50);
       setTimeout(() => {
         const newYear = wrapper.vm.innerValue.getFullYear();
         const newMonth = wrapper.vm.innerValue.getMonth() + 1;
@@ -106,11 +106,11 @@ describe('DatetimePicker', () => {
 
     setTimeout(() => {
       const [year, month, day, hour, minute] = wrapper.find('.van-picker-column ul');
-      dragHelper(year, -50);
+      dragHelper(year, 0, -50);
-      dragHelper(month, -50);
+      dragHelper(month, 0, -50);
-      dragHelper(day, -50);
+      dragHelper(day, 0, -50);
-      dragHelper(hour, -50);
+      dragHelper(hour, 0, -50);
-      dragHelper(minute, -50);
+      dragHelper(minute, 0, -50);
       setTimeout(() => {
         const newYear = wrapper.vm.innerValue.getFullYear();
         const newMonth = wrapper.vm.innerValue.getMonth() + 1;

test/specs/picker.spec.js

@@ -274,10 +274,10 @@ describe('PickerColumn', () => {
     expect(wrapper.vm.currentIndex).to.equal(0);
 
     const column = wrapper.find('.van-picker-column')[0];
-    dragHelper(column, 0);
+    dragHelper(column, 0, 0);
     expect(wrapper.vm.currentIndex).to.equal(0);
 
-    dragHelper(column, -100);
+    dragHelper(column, 0, -100);
     expect(wrapper.vm.currentIndex).to.equal(2);
   });
 });

test/utils.js

@@ -74,11 +74,11 @@ export function triggerTouch(wrapper, eventName, x, y) {
   el.dispatchEvent(event);
 }
 
-export function dragHelper(el, position) {
+export function dragHelper(el, x = 0, y = 0) {
   triggerTouch(el, 'touchstart', 0, 0);
-  triggerTouch(el, 'touchmove', 0, position / 4);
+  triggerTouch(el, 'touchmove', x / 4, y / 4);
-  triggerTouch(el, 'touchmove', 0, position / 3);
+  triggerTouch(el, 'touchmove', x / 3, y / 3);
-  triggerTouch(el, 'touchmove', 0, position / 2);
+  triggerTouch(el, 'touchmove', x / 2, y / 2);
-  triggerTouch(el, 'touchmove', 0, position);
+  triggerTouch(el, 'touchmove', x, y);
-  triggerTouch(el, 'touchend', 0, position);
+  triggerTouch(el, 'touchend', x, y);
 }