From d8d1aa6e829a89dd343a6e4fa526b01962927248 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 19:41:31 +0800 Subject: [PATCH] [Improvement] CellSwipe: optimzie animation fluency (#685) --- docs/demos/views/cell-swipe.vue | 15 ++++------ packages/cell-swipe/index.vue | 27 +++++++++++------- packages/vant-css/src/cell-swipe.css | 6 ---- test/specs/cell-swipe.spec.js | 42 +++++++++++----------------- test/specs/datetime-picker.spec.js | 20 ++++++------- test/specs/picker.spec.js | 4 +-- test/utils.js | 12 ++++---- 7 files changed, 57 insertions(+), 69 deletions(-) diff --git a/docs/demos/views/cell-swipe.vue b/docs/demos/views/cell-swipe.vue index 992cffe1a..56fee5629 100644 --- a/docs/demos/views/cell-swipe.vue +++ b/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__right { + .van-cell-swipe { + &__left, + &__right { color: #FFFFFF; - font-size: 16px; + font-size: 15px; width: 65px; height: 44px; display: inline-block; text-align: center; line-height: 44px; - } - .van-cell-swipe__left { - background-color: #FF4444; - } - .van-cell-swipe__right { - background-color: #84c483; + background-color: #F44; + } } } diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue index ba80a2fac..bb9b23e8f 100644 --- a/packages/cell-swipe/index.vue +++ b/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); }; diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css index 88d48cc74..50b250db3 100644 --- a/packages/vant-css/src/cell-swipe.css +++ b/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; diff --git a/test/specs/cell-swipe.spec.js b/test/specs/cell-swipe.spec.js index 6821d7aac..d8dd20ab9 100644 --- a/test/specs/cell-swipe.spec.js +++ b/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); - - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 10, 0); - triggerTouch(wrapper, 'touchmove', 30, 0); - triggerTouch(wrapper, 'touchend', 30, 0); - expect(wrapper.vm.offset).to.equal(0); + dragHelper(wrapper, 50); + expect(wrapper.vm.offset).to.equal(100); }); - it('drag and reset right part', () => { + it('drag and show right part', () => { wrapper = mount(CellSwipe, defaultProps); - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', -10, 0); - triggerTouch(wrapper, 'touchmove', -30, 0); - triggerTouch(wrapper, 'touchend', -30, 0); - expect(wrapper.vm.offset).to.equal(0); + dragHelper(wrapper, -50); + expect(wrapper.vm.offset).to.equal(-100); }); - 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); - expect(wrapper.vm.offset).to.equal(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); - triggerTouch(wrapper, 'touchmove', 20, 0); - triggerTouch(wrapper, 'touchmove', 50, 0); - triggerTouch(wrapper, 'touchend', 50, 0); + dragHelper(wrapper, 50); expect(wrapper.vm.offset).to.equal(100); wrapper.vm.$nextTick(() => { expect(wrapper.vm.opened).to.be.true; - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 1, 0); - + dragHelper(wrapper, -50); 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); - triggerTouch(wrapper, 'touchmove', 0, 100); - triggerTouch(wrapper, 'touchend', 0, 100); + dragHelper(wrapper, 0, 100); expect(wrapper.vm.offset).to.equal(0); }); diff --git a/test/specs/datetime-picker.spec.js b/test/specs/datetime-picker.spec.js index 4095e08fd..defb80093 100644 --- a/test/specs/datetime-picker.spec.js +++ b/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(minute, -50); + dragHelper(hour, 0, -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(month, -50); - dragHelper(day, -50); + dragHelper(year, 0, -50); + dragHelper(month, 0, -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(month, -50); - dragHelper(day, -50); - dragHelper(hour, -50); - dragHelper(minute, -50); + dragHelper(year, 0, -50); + dragHelper(month, 0, -50); + dragHelper(day, 0, -50); + dragHelper(hour, 0, -50); + dragHelper(minute, 0, -50); setTimeout(() => { const newYear = wrapper.vm.innerValue.getFullYear(); const newMonth = wrapper.vm.innerValue.getMonth() + 1; diff --git a/test/specs/picker.spec.js b/test/specs/picker.spec.js index c2d6bb345..973f0dc4a 100644 --- a/test/specs/picker.spec.js +++ b/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); }); }); diff --git a/test/utils.js b/test/utils.js index 86a162f6b..c4e85b7ed 100644 --- a/test/utils.js +++ b/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', 0, position / 3); - triggerTouch(el, 'touchmove', 0, position / 2); - triggerTouch(el, 'touchmove', 0, position); - triggerTouch(el, 'touchend', 0, position); + triggerTouch(el, 'touchmove', x / 4, y / 4); + triggerTouch(el, 'touchmove', x / 3, y / 3); + triggerTouch(el, 'touchmove', x / 2, y / 2); + triggerTouch(el, 'touchmove', x, y); + triggerTouch(el, 'touchend', x, y); }