From 6b159a0e913169ded8e829ee37668bb0e694ce93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Strau=C3=9F?= Date: Tue, 19 May 2020 15:53:07 +0200 Subject: [PATCH 1/3] fix(transition): ios transition works on devices without IO support --- core/src/utils/transition/ios.transition.ts | 30 ++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index ca02623b809..d211e5ae10b 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -62,18 +62,24 @@ const createLargeTitleTransition = (rootAnimation: Animation, rtl: boolean, back const shouldAnimationForward = enteringBackButton !== null && leavingLargeTitle !== null && !backDirection; const shouldAnimationBackward = enteringLargeTitle !== null && leavingBackButton !== null && backDirection; - if (shouldAnimationForward) { - const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); - const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); - - animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox); - animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox); - } else if (shouldAnimationBackward) { - const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); - const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); - - animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox); - animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox); + /** + * A device without IntersectionObserver support will not have setup collapsible headers, + * this animation would need the cloned title + back-button to work + */ + if (typeof (IntersectionObserver as any) !== 'undefined') { + if (shouldAnimationForward) { + const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); + const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); + + animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox); + animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox); + } else if (shouldAnimationBackward) { + const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); + const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); + + animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox); + animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox); + } } return { From 7b1d3b3818ee142b03a9b7a0510af14a5d8e3b86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Strau=C3=9F?= Date: Wed, 27 May 2020 12:56:53 +0200 Subject: [PATCH 2/3] Revert "fix(transition): ios transition works on devices without IO support" This reverts commit 6b159a0e913169ded8e829ee37668bb0e694ce93. --- core/src/utils/transition/ios.transition.ts | 30 +++++++++------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index d211e5ae10b..ca02623b809 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -62,24 +62,18 @@ const createLargeTitleTransition = (rootAnimation: Animation, rtl: boolean, back const shouldAnimationForward = enteringBackButton !== null && leavingLargeTitle !== null && !backDirection; const shouldAnimationBackward = enteringLargeTitle !== null && leavingBackButton !== null && backDirection; - /** - * A device without IntersectionObserver support will not have setup collapsible headers, - * this animation would need the cloned title + back-button to work - */ - if (typeof (IntersectionObserver as any) !== 'undefined') { - if (shouldAnimationForward) { - const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); - const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); - - animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox); - animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox); - } else if (shouldAnimationBackward) { - const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); - const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); - - animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox); - animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox); - } + if (shouldAnimationForward) { + const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); + const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); + + animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox); + animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox); + } else if (shouldAnimationBackward) { + const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); + const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); + + animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox); + animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox); } return { From ad94e5d2ccc5905596ffd7b7921b35565c9624a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Strau=C3=9F?= Date: Wed, 27 May 2020 14:15:46 +0200 Subject: [PATCH 3/3] fix(header): clone elements for iOS transition before setting up collapsible header --- core/src/components/header/header.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 29a53447858..17f623114e5 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -64,6 +64,13 @@ export class Header implements ComponentInterface { const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner'); const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null; + // Cloned elements are always needed in iOS transition + writeTask(() => { + const title = cloneElement('ion-title') as HTMLIonTitleElement; + title.size = 'large'; + cloneElement('ion-back-button'); + }); + await this.setupCollapsibleHeader(contentEl, pageEl); } } @@ -127,10 +134,6 @@ export class Header implements ComponentInterface { this.scrollEl!.addEventListener('scroll', this.contentScrollCallback); writeTask(() => { - const title = cloneElement('ion-title') as HTMLIonTitleElement; - title.size = 'large'; - cloneElement('ion-back-button'); - if (this.collapsibleMainHeader !== undefined) { this.collapsibleMainHeader.classList.add('header-collapse-main'); }