blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2018-03-13 19:41:31 +08:00 committed by GitHub
parent 4006a86cec
commit d8d1aa6e82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/demos/views/cell-swipe.vue
View File

@ -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;
}
}
}
</style>

27
packages/cell-swipe/index.vue
View File

@ -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);
};

6
packages/vant-css/src/cell-swipe.css
View File

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

42
test/specs/cell-swipe.spec.js
View File

@ -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);
});

20
test/specs/datetime-picker.spec.js
View File

@ -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;

4
test/specs/picker.spec.js
View File

@ -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);
});
});

12
test/utils.js
View File

@ -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);
}