Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(transition): ios transition works on devices without IO support #21339

Merged
merged 4 commits into from
May 27, 2020
Merged

fix(transition): ios transition works on devices without IO support #21339

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b159a0
fix(transition): ios transition works on devices without IO support
DavidStrausz May 19, 2020
7b1d3b3
Revert "fix(transition): ios transition works on devices without IO s…
DavidStrausz May 27, 2020
bde9083
Merge branch 'master' into ios-transition-fix
DavidStrausz May 27, 2020
ad94e5d
fix(header): clone elements for iOS transition before setting up coll…
DavidStrausz May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 18 additions & 12 deletions core/src/utils/transition/ios.transition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down