javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(many): reduce delay when performing overlay or page transitions (#26189)

Browse Source 
resolves #24346
This commit is contained in:
Liam DeBeasi
2022-11-01 12:08:27 -05:00
committed by GitHub
parent eea6ba996c
commit 30e3a1485d
8 changed files with 57 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -195,7 +195,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
}
});
const transition = (
const transition = async (
enteringEl: HTMLElement,
leavingEl: HTMLElement,
direction: any, // TODO types
@ -203,42 +203,35 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
progressAnimation: boolean,
animationBuilder?: AnimationBuilder
) => {
return new Promise(resolve => {
if (skipTransition) {
skipTransition = false;
return resolve(false);
}
if (skipTransition) {
skipTransition = false;
return Promise.resolve(false);
}
if (enteringEl === leavingEl) {
return resolve(false);
}
if (enteringEl === leavingEl) {
return Promise.resolve(false);
}
requestAnimationFrame(() => {
requestAnimationFrame(async () => {
enteringEl.classList.add('ion-page-invisible');
enteringEl.classList.add('ion-page-invisible');
const hasRootDirection = direction === undefined || direction === 'root' || direction === 'none';
const result = await ionRouterOutlet.value.commit(enteringEl, leavingEl, {
deepWait: true,
/**
* replace operations result in a direction of none.
* These typically do not have need animations, so we set
* the duration to 0. However, if a developer explicitly
* passes an animationBuilder, we should assume that
* they want an animation to be played even
* though it is a replace operation.
*/
duration: hasRootDirection && animationBuilder === undefined ? 0 : undefined,
direction,
showGoBack,
progressAnimation,
animationBuilder
});
return resolve(result);
});
});
const hasRootDirection = direction === undefined || direction === 'root' || direction === 'none';
const result = await ionRouterOutlet.value.commit(enteringEl, leavingEl, {
/**
* replace operations result in a direction of none.
* These typically do not have need animations, so we set
* the duration to 0. However, if a developer explicitly
* passes an animationBuilder, we should assume that
* they want an animation to be played even
* though it is a replace operation.
*/
duration: hasRootDirection && animationBuilder === undefined ? 0 : undefined,
direction,
showGoBack,
progressAnimation,
animationBuilder
});
return result;
}
const handlePageTransition = async () => {