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

fix(header): fix collapsing iOS header when using with split pane (#19480)

Browse Source 
fixes #19541
This commit is contained in:
Liam DeBeasi
2019-10-04 15:21:15 -04:00
committed by GitHub
parent 17614cdcb3
commit dea1c2635d
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/header/header.utils.ts
View File

@ -88,7 +88,9 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
const rootArea = event.rootBounds.width * event.rootBounds.height; const rootArea = event.rootBounds.width * event.rootBounds.height;
const isPageHidden = intersectionArea === 0 && rootArea === 0; const isPageHidden = intersectionArea === 0 && rootArea === 0;
const isPageTransitioning = intersectionArea > 0 && (intersection.left !== event.rootBounds.left || intersection.right !== event.rootBounds.right); const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
if (isPageHidden || isPageTransitioning) { if (isPageHidden || isPageTransitioning) {
return; return;

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

@ -61,13 +61,15 @@ const createLargeTitleTransition = (rootAnimation: IonicAnimation, rtl: boolean,
}; };
const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, backButtonEl: any) => { const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, backButtonEl: any) => {
const backButtonBounds = backButtonEl.getBoundingClientRect();
const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBounds.right + 4}px)` : `${backButtonBounds.left - 4}px`;
const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px'; const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px'; const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';
const ICON_TRANSLATE = (rtl) ? '-4px' : '4px'; const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';
const TEXT_TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left'; const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
const ICON_TRANSFORM_ORIGIN_X = (rtl) ? 'left' : 'right'; const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';
const FORWARD_TEXT_KEYFRAMES = [ const FORWARD_TEXT_KEYFRAMES = [
{ offset: 0, opacity: 0, transform: `translate(${START_TEXT_TRANSLATE}, ${addSafeArea(8)}) scale(2.1)` }, { offset: 0, opacity: 0, transform: `translate(${START_TEXT_TRANSLATE}, ${addSafeArea(8)}) scale(2.1)` },
@ -113,20 +115,22 @@ const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDire
enteringBackButtonTextAnimation enteringBackButtonTextAnimation
.beforeStyles({ .beforeStyles({
'transform-origin': `${TEXT_TRANSFORM_ORIGIN_X} center` 'transform-origin': `${TEXT_ORIGIN_X} center`
}) })
.beforeAddWrite(() => { .beforeAddWrite(() => {
backButtonEl.style.setProperty('display', 'none'); backButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
}) })
.afterAddWrite(() => { .afterAddWrite(() => {
backButtonEl.style.setProperty('display', ''); backButtonEl.style.setProperty('display', '');
clonedBackButtonEl.style.setProperty('display', 'none'); clonedBackButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
}) })
.keyframes(TEXT_KEYFRAMES); .keyframes(TEXT_KEYFRAMES);
enteringBackButtonIconAnimation enteringBackButtonIconAnimation
.beforeStyles({ .beforeStyles({
'transform-origin': `${ICON_TRANSFORM_ORIGIN_X} center` 'transform-origin': `${ICON_ORIGIN_X} center`
}) })
.keyframes(ICON_KEYFRAMES); .keyframes(ICON_KEYFRAMES);
@ -134,8 +138,10 @@ const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDire
}; };
const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => { const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => {
const largeTitleBounds = largeTitleEl.getBoundingClientRect();
const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBounds.right}px)` : `${largeTitleBounds.left}px`;
const START_TRANSLATE = (rtl) ? '-18px' : '18px'; const START_TRANSLATE = (rtl) ? '-18px' : '18px';
const TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left'; const ORIGIN_X = (rtl) ? 'right' : 'left';
const BACKWARDS_KEYFRAMES = [ const BACKWARDS_KEYFRAMES = [
{ offset: 0, opacity: 0, transform: `translate(${START_TRANSLATE}, ${addSafeArea(0)}) scale(0.49)` }, { offset: 0, opacity: 0, transform: `translate(${START_TRANSLATE}, ${addSafeArea(0)}) scale(0.49)` },
@ -160,10 +166,11 @@ const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDire
clonedLargeTitleAnimation clonedLargeTitleAnimation
.beforeStyles({ .beforeStyles({
'transform-origin': `${TRANSFORM_ORIGIN_X} center`, 'transform-origin': `${ORIGIN_X} center`,
'height': '46px', 'height': '46px',
'display': '', 'display': '',
'position': 'relative' 'position': 'relative',
[ORIGIN_X]: TITLE_START_OFFSET
}) })
.beforeAddWrite(() => { .beforeAddWrite(() => {
largeTitleEl.style.setProperty('display', 'none'); largeTitleEl.style.setProperty('display', 'none');