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

[bugfix] Transition: fix timing error

Browse Source 
fix #1695 #1680
This commit is contained in:
rex 2019-06-17 14:19:53 +08:00 committed by GitHub
parent 338dd3bd25
commit bad324a4c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/mixins/transition.ts
View File

@ -7,7 +7,7 @@ const getClassNames = (name: string) => ({
'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class` 'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`
}); });
const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 20)); const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30));
export const transition = function(showDefaultValue: boolean) { export const transition = function(showDefaultValue: boolean) {
return Behavior({ return Behavior({
@ -39,14 +39,14 @@ export const transition = function(showDefaultValue: boolean) {
attached() { attached() {
if (this.data.show) { if (this.data.show) {
this.show(); this.enter();
} }
}, },
methods: { methods: {
observeShow(value: boolean) { observeShow(value: boolean) {
if (value) { if (value) {
this.show(); this.enter();
} else { } else {
this.leave(); this.leave();
} }
@ -58,47 +58,67 @@ export const transition = function(showDefaultValue: boolean) {
}); });
}, },
show() { enter() {
const { classNames, duration } = this.data; const { classNames, duration } = this.data;
const currentDuration = isObj(duration) ? duration.leave : duration; const currentDuration = isObj(duration) ? duration.leave : duration;
this.status = 'enter';
Promise.resolve() Promise.resolve()
.then(nextTick) .then(nextTick)
.then(() => .then(() => {
this.checkStatus('enter');
this.set({ this.set({
inited: true, inited: true,
display: true, display: true,
classes: classNames.enter, classes: classNames.enter,
currentDuration currentDuration
});
}) })
)
.then(nextTick) .then(nextTick)
.then(() => .then(() => {
this.checkStatus('enter');
this.set({ this.set({
classes: classNames['enter-to'] classes: classNames['enter-to']
});
}) })
); .catch(() => {});
}, },
leave() { leave() {
const { classNames, duration } = this.data; const { classNames, duration } = this.data;
const currentDuration = isObj(duration) ? duration.leave : duration; const currentDuration = isObj(duration) ? duration.leave : duration;
this.status = 'leave';
Promise.resolve() Promise.resolve()
.then(nextTick) .then(nextTick)
.then(() => .then(() => {
this.checkStatus('leave');
this.set({ this.set({
classes: classNames.leave, classes: classNames.leave,
currentDuration currentDuration
});
}) })
)
.then(() => setTimeout(() => this.onTransitionEnd(), currentDuration)) .then(() => setTimeout(() => this.onTransitionEnd(), currentDuration))
.then(nextTick) .then(nextTick)
.then(() => .then(() => {
this.checkStatus('leave');
this.set({ this.set({
classes: classNames['leave-to'] classes: classNames['leave-to']
});
}) })
); .catch(() => {});
},
checkStatus(status: 'enter' | 'leave') {
if (status !== this.status) {
throw new Error(`incongruent status: ${status}`);
}
}, },
onTransitionEnd() { onTransitionEnd() {

2
packages/popup/index.wxml
View File

@ -1,7 +1,7 @@
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<van-overlay <van-overlay
wx:if="{{ inited && overlay }}" wx:if="{{ overlay }}"
mask mask
show="{{ show }}" show="{{ show }}"
z-index="{{ zIndex }}" z-index="{{ zIndex }}"