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

fix(vue): hide layout shift on ion-page components (#22254)

Browse Source 
resolves #22052
This commit is contained in:
Liam DeBeasi
2020-10-06 15:00:48 -04:00
committed by GitHub
parent 6849dd3483
commit 2bad1bb82e
11 changed files with 240 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vue/src/components/IonPage.ts
View File

@ -7,7 +7,7 @@ export const IonPage = defineComponent({
return h(
'div',
{
['class']: 'ion-page',
['class']: 'ion-page ion-page-invisible',
...attrs,
ref: 'ionPage'
},

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

@ -125,24 +125,32 @@ export const IonRouterOutlet = defineComponent({
progressAnimation: boolean,
animationBuilder?: AnimationBuilder
) => {
if (skipTransition) {
skipTransition = false;
return Promise.resolve(false);
}
return new Promise(resolve => {
if (skipTransition) {
skipTransition = false;
return resolve(false);
}
if (enteringEl === leavingEl) {
return Promise.resolve(false);
}
if (enteringEl === leavingEl) {
return resolve(false);
}
enteringEl.classList.add('ion-page-invisible');
requestAnimationFrame(() => {
requestAnimationFrame(async () => {
enteringEl.classList.add('ion-page-invisible');
return ionRouterOutlet.value.commit(enteringEl, leavingEl, {
deepWait: true,
duration: direction === undefined || direction === 'root' || direction === 'none' ? 0 : undefined,
direction,
showGoBack,
progressAnimation,
animationBuilder
const result = await ionRouterOutlet.value.commit(enteringEl, leavingEl, {
deepWait: true,
duration: direction === undefined || direction === 'root' || direction === 'none' ? 0 : undefined,
direction,
showGoBack,
progressAnimation,
animationBuilder
});
return resolve(result);
});
});
});
}
@ -152,6 +160,9 @@ export const IonRouterOutlet = defineComponent({
const enteringViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id);
const leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id);
const enteringEl = enteringViewItem.ionPageElement;
if (enteringViewItem === leavingViewItem) return;
if (enteringViewItem === leavingViewItem) return;
@ -159,7 +170,6 @@ export const IonRouterOutlet = defineComponent({
if (leavingViewItem) {
let animationBuilder = routerAnimation;
const enteringEl = enteringViewItem.ionPageElement;
const leavingEl = leavingViewItem.ionPageElement;
fireLifecycle(leavingViewItem.vueComponent, LIFECYCLE_WILL_LEAVE);
@ -207,6 +217,14 @@ export const IonRouterOutlet = defineComponent({
}
fireLifecycle(leavingViewItem.vueComponent, LIFECYCLE_DID_LEAVE);
} else {
/**
* If there is no leaving element, just show
* the entering element. Wrap it in an raf
* in case ion-content's fullscreen callback
* is running. Otherwise we'd have a flicker.
*/
requestAnimationFrame(() => enteringEl.classList.remove('ion-page-invisible'));
}
fireLifecycle(enteringViewItem.vueComponent, LIFECYCLE_DID_ENTER);