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(ios): hide leaving view after nav transition to avoid flicker (#19691)

Browse Source 
fixes #19674
This commit is contained in:
Liam DeBeasi
2019-10-18 10:08:42 -04:00
committed by GitHub
parent e3233000c6
commit e6e01381eb
3 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/utils/transition/index.ts
View File

@ -223,6 +223,19 @@ const setZIndex = (
} }
}; };
export const getIonPageElement = (element: HTMLElement) => {
if (element.classList.contains('ion-page')) {
return element;
}
const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
if (ionPage) {
return ionPage;
}
// idk, return the original element so at least something animates and we don't have a null pointer
return element;
};
export interface TransitionOptions extends NavOptions { export interface TransitionOptions extends NavOptions {
progressCallback?: ((ani: Animation | undefined) => void); progressCallback?: ((ani: Animation | undefined) => void);
baseEl: any; baseEl: any;

9
core/src/utils/transition/ios.transition.ts
View File

@ -1,6 +1,6 @@
import { Animation } from '../../interface'; import { Animation } from '../../interface';
import { createAnimation } from '../animation/animation'; import { createAnimation } from '../animation/animation';
import { TransitionOptions } from '../transition'; import { TransitionOptions, getIonPageElement } from '../transition';
const DURATION = 540; const DURATION = 540;
const addSafeArea = (val: number, side = 'top'): string => { const addSafeArea = (val: number, side = 'top'): string => {
@ -376,6 +376,13 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
.beforeClearStyles([OPACITY]) .beforeClearStyles([OPACITY])
.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)')); .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
const leavingPage = getIonPageElement(leavingEl) as HTMLElement;
rootAnimation.afterAddWrite(() => {
if (rootAnimation.getDirection() === 'normal') {
leavingPage.style.setProperty('display', 'none');
}
});
} else { } else {
// leaving content, forward direction // leaving content, forward direction
leavingContent leavingContent

15
core/src/utils/transition/md.transition.ts
View File

@ -1,6 +1,6 @@
import { Animation } from '../../interface'; import { Animation } from '../../interface';
import { createAnimation } from '../animation/animation'; import { createAnimation } from '../animation/animation';
import { TransitionOptions } from '../transition'; import { TransitionOptions, getIonPageElement } from '../transition';
export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => { export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
const OFF_BOTTOM = '40px'; const OFF_BOTTOM = '40px';
@ -59,16 +59,3 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
return rootTransition; return rootTransition;
}; };
const getIonPageElement = (element: HTMLElement) => {
if (element.classList.contains('ion-page')) {
return element;
}
const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
if (ionPage) {
return ionPage;
}
// idk, return the original element so at least something animates and we don't have a null pointer
return element;
};