feat(shared-transition): pageOut option for more dynamic page animations (#10350)

NathanWalker · web-flow · commit 9f715c0c5f8f · 2023-07-26T18:12:49.000-07:00
diff --git 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
@@ -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.
 	 */
