diff --git a/packages/core/ui/transition/shared-transition-helper.ios.ts b/packages/core/ui/transition/shared-transition-helper.ios.ts index 5a5ee5051..23ba1d077 100644 --- a/packages/core/ui/transition/shared-transition-helper.ios.ts +++ b/packages/core/ui/transition/shared-transition-helper.ios.ts @@ -50,6 +50,7 @@ export class SharedTransitionHelper { console.log(`2. Take snapshots of shared elements and position them based on presenting view:`); } + const pageOut = state.pageOut; const pageStart = state.pageStart; const startFrame = getRectFromProps(pageStart, getPageStartDefaultsForType(type)); @@ -273,6 +274,14 @@ export class SharedTransitionHelper { const endFrame = getRectFromProps(pageEnd); transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height); + if (pageOut) { + if (isNumber(pageOut.opacity)) { + transition.presenting.view.alpha = pageOut?.opacity; + } + + const outFrame = getRectFromProps(pageOut); + transition.presenting.view.frame = CGRectMake(outFrame.x, outFrame.y, outFrame.width, outFrame.height); + } // animate page properties to the following: // https://stackoverflow.com/a/27997678/1418981 // In order to have proper layout. Seems mostly needed when presenting. @@ -368,6 +377,7 @@ export class SharedTransitionHelper { console.log(`2. Add back previously stored sharedElements to dismiss:`); } + const pageOut = state.pageOut; const pageEnd = state.pageEnd; const pageEndTags = pageEnd?.sharedTransitionTags || {}; const pageReturn = state.pageReturn; @@ -457,6 +467,14 @@ export class SharedTransitionHelper { const endFrame = getRectFromProps(pageReturn, getPageStartDefaultsForType(type)); transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height); + if (pageOut) { + // always return to defaults if pageOut had been used + transition.presenting.view.alpha = 1; + + const outFrame = getRectFromProps(null); + transition.presenting.view.frame = CGRectMake(0, 0, outFrame.width, outFrame.height); + } + for (const presenting of transition.sharedElements.presenting) { iOSUtils.copyLayerProperties(presenting.snapshot, presenting.view.ios, presenting.propertiesToMatch as any); presenting.snapshot.frame = presenting.startFrame; diff --git a/packages/core/ui/transition/shared-transition.ts b/packages/core/ui/transition/shared-transition.ts index 4f4f2ec21..45b6bc4a2 100644 --- a/packages/core/ui/transition/shared-transition.ts +++ b/packages/core/ui/transition/shared-transition.ts @@ -104,13 +104,17 @@ export interface SharedTransitionConfig { dismiss?: SharedTransitionInteractiveOptions; }; /** - * View settings to start your transition with. + * View settings applied to the incoming page to start your transition with. */ pageStart?: SharedTransitionPageProperties; /** - * View settings to end your transition with. + * View settings applied to the incoming page to end your transition with. */ pageEnd?: SharedTransitionPageWithDurationProperties; + /** + * View settings applied to the outgoing page in your transition. + */ + pageOut?: SharedTransitionPageWithDurationProperties; /** * View settings to return to the original page with. */