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

refactor(transition): refactor requestAnimationFrame with selectorQuery to improve performance (#3498)

Browse Source 
fix #3133, fix #3120, fix #2636, fix #3441, fix #3434, fix #3455
This commit is contained in:
rex 2020-08-08 23:20:20 +08:00 committed by GitHub
parent f2bf0073df
commit 84b70f50fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/common/utils.ts
View File

@ -38,3 +38,19 @@ export function addUnit(value?: string | number): string | undefined {
value = String(value); value = String(value);
return isNumber(value) ? `${value}px` : value; return isNumber(value) ? `${value}px` : value;
} }
export function requestAnimationFrame(cb: Function) {
const systemInfo = getSystemInfoSync();
if (systemInfo.platform === 'devtools') {
return nextTick(cb);
}
return wx
.createSelectorQuery()
.selectViewport()
.boundingClientRect()
.exec(() => {
cb();
});
}

66
packages/mixins/transition.ts
View File

@ -1,4 +1,4 @@
import { isObj } from '../common/utils'; import { isObj, requestAnimationFrame } from '../common/utils';
const getClassNames = (name: string) => ({ const getClassNames = (name: string) => ({
enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`, enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
@ -7,8 +7,6 @@ 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 / 30));
export const transition = function (showDefaultValue: boolean) { export const transition = function (showDefaultValue: boolean) {
return Behavior({ return Behavior({
properties: { properties: {
@ -53,29 +51,24 @@ export const transition = function (showDefaultValue: boolean) {
this.status = 'enter'; this.status = 'enter';
this.$emit('before-enter'); this.$emit('before-enter');
Promise.resolve() requestAnimationFrame(() => {
.then(nextTick) this.checkStatus('enter');
.then(() => { this.$emit('enter');
this.checkStatus('enter');
this.$emit('enter');
this.setData({ this.setData({
inited: true, inited: true,
display: true, display: true,
classes: classNames.enter, classes: classNames.enter,
currentDuration, currentDuration,
}); });
})
.then(nextTick) requestAnimationFrame(() => {
.then(() => {
this.checkStatus('enter'); this.checkStatus('enter');
this.transitionEnded = false; this.transitionEnded = false;
this.setData({ this.setData({ classes: classNames['enter-to'] });
classes: classNames['enter-to'], });
}); });
})
.catch(() => {});
}, },
leave() { leave() {
@ -90,28 +83,23 @@ export const transition = function (showDefaultValue: boolean) {
this.status = 'leave'; this.status = 'leave';
this.$emit('before-leave'); this.$emit('before-leave');
Promise.resolve() requestAnimationFrame(() => {
.then(nextTick) this.checkStatus('leave');
.then(() => { this.$emit('leave');
this.checkStatus('leave');
this.$emit('leave');
this.setData({ this.setData({
classes: classNames.leave, classes: classNames.leave,
currentDuration, currentDuration,
}); });
})
.then(nextTick) requestAnimationFrame(() => {
.then(() => {
this.checkStatus('leave'); this.checkStatus('leave');
this.transitionEnded = false; this.transitionEnded = false;
setTimeout(() => this.onTransitionEnd(), currentDuration); setTimeout(() => this.onTransitionEnd(), currentDuration);
this.setData({ this.setData({ classes: classNames['leave-to'] });
classes: classNames['leave-to'], });
}); });
})
.catch(() => {});
}, },
checkStatus(status: 'enter' | 'leave') { checkStatus(status: 'enter' | 'leave') {