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

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

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 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 END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';
const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';
const TEXT_TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
const ICON_TRANSFORM_ORIGIN_X = (rtl) ? 'left' : 'right';
const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';
const FORWARD_TEXT_KEYFRAMES = [
{ 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
.beforeStyles({
'transform-origin': `${TEXT_TRANSFORM_ORIGIN_X} center`
'transform-origin': `${TEXT_ORIGIN_X} center`
})
.beforeAddWrite(() => {
backButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
})
.afterAddWrite(() => {
backButtonEl.style.setProperty('display', '');
clonedBackButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
})
.keyframes(TEXT_KEYFRAMES);
enteringBackButtonIconAnimation
.beforeStyles({
'transform-origin': `${ICON_TRANSFORM_ORIGIN_X} center`
'transform-origin': `${ICON_ORIGIN_X} center`
})
.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 largeTitleBounds = largeTitleEl.getBoundingClientRect();
const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBounds.right}px)` : `${largeTitleBounds.left}px`;
const START_TRANSLATE = (rtl) ? '-18px' : '18px';
const TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
const ORIGIN_X = (rtl) ? 'right' : 'left';
const BACKWARDS_KEYFRAMES = [
{ 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
.beforeStyles({
'transform-origin': `${TRANSFORM_ORIGIN_X} center`,
'transform-origin': `${ORIGIN_X} center`,
'height': '46px',
'display': '',
'position': 'relative'
'position': 'relative',
[ORIGIN_X]: TITLE_START_OFFSET
})
.beforeAddWrite(() => {
largeTitleEl.style.setProperty('display', 'none');