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

fix(Transition): fix transition event sequence (#5699)

Browse Source
This commit is contained in:
johnsonwong666 2024-01-15 19:47:25 +08:00 committed by GitHub
parent f2ff0e7b48
commit 19083a327c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/mixins/transition.ts
View File

@ -53,75 +53,81 @@ export function transition(showDefaultValue: boolean) {
}, },
enter() { enter() {
const { duration, name } = this.data; this.waitEnterEndPromise = new Promise((resolve) => {
const classNames = getClassNames(name); const { duration, name } = this.data;
const currentDuration = isObj(duration) ? duration.enter : duration; const classNames = getClassNames(name);
const currentDuration = isObj(duration) ? duration.enter : duration;
if (this.status === 'enter') { if (this.status === 'enter') {
return;
}
this.status = 'enter';
this.$emit('before-enter');
requestAnimationFrame(() => {
if (this.status !== 'enter') {
return; return;
} }
this.$emit('enter'); this.status = 'enter';
this.$emit('before-enter');
this.setData({
inited: true,
display: true,
classes: classNames.enter,
currentDuration,
});
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (this.status !== 'enter') { if (this.status !== 'enter') {
return; return;
} }
this.transitionEnded = false; this.$emit('enter');
this.setData({ classes: classNames['enter-to'] });
this.setData({
inited: true,
display: true,
classes: classNames.enter,
currentDuration,
});
requestAnimationFrame(() => {
if (this.status !== 'enter') {
return;
}
this.transitionEnded = false;
this.setData({ classes: classNames['enter-to'] });
resolve();
});
}); });
}); });
}, },
leave() { leave() {
if (!this.data.display) { if (!this.waitEnterEndPromise) return;
return; this.waitEnterEndPromise.then(() => {
} if (!this.data.display) {
const { duration, name } = this.data;
const classNames = getClassNames(name);
const currentDuration = isObj(duration) ? duration.leave : duration;
this.status = 'leave';
this.$emit('before-leave');
requestAnimationFrame(() => {
if (this.status !== 'leave') {
return; return;
} }
this.$emit('leave'); const { duration, name } = this.data;
const classNames = getClassNames(name);
const currentDuration = isObj(duration) ? duration.leave : duration;
this.setData({ this.status = 'leave';
classes: classNames.leave, this.$emit('before-leave');
currentDuration,
});
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (this.status !== 'leave') { if (this.status !== 'leave') {
return; return;
} }
this.transitionEnded = false; this.$emit('leave');
setTimeout(() => this.onTransitionEnd(), currentDuration);
this.setData({ classes: classNames['leave-to'] }); this.setData({
classes: classNames.leave,
currentDuration,
});
requestAnimationFrame(() => {
if (this.status !== 'leave') {
return;
}
this.transitionEnded = false;
setTimeout(() => this.onTransitionEnd(), currentDuration);
this.setData({ classes: classNames['leave-to'] });
});
}); });
}); });
}, },