[Web LA] Add EntryExitTransition

packages/react-native-reanimated/src/layoutReanimation/web/animationParser.ts

@@ -34,6 +34,8 @@ export interface TransitionData {
   scaleX: number;
   scaleY: number;
   reversed?: boolean;
+  entering?: any;
+  exiting?: any;
 }
 
 export function convertAnimationObjectToKeyframes(

packages/react-native-reanimated/src/layoutReanimation/web/animationsManager.ts

@@ -214,12 +214,18 @@ export function tryActivateLayoutTransition<
     return;
   }
 
+  const enteringAnimation = (props.layout as CustomConfig).enteringV
+    ?.presetName;
+  const exitingAnimation = (props.layout as CustomConfig).exitingV?.presetName;
+
   const transitionData: TransitionData = {
     translateX: snapshot.x - rect.x,
     translateY: snapshot.y - rect.y,
     scaleX: snapshot.width / rect.width,
     scaleY: snapshot.height / rect.height,
     reversed: false, // This field is used only in `SequencedTransition`, so by default it will be false
+    entering: enteringAnimation,
+    exiting: exitingAnimation,
   };
 
   startWebLayoutAnimation(

packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts

@@ -220,6 +220,9 @@ export function handleLayoutTransition(
     case 'JumpingTransition':
       animationType = TransitionType.JUMPING;
       break;
+    case 'EntryExitTransition':
+      animationType = TransitionType.ENTRY_EXIT;
+      break;
     default:
       animationType = TransitionType.LINEAR;
       break;

packages/react-native-reanimated/src/layoutReanimation/web/config.ts

@@ -62,13 +62,16 @@ export interface CustomConfig {
   callbackV?: AnimationCallback;
   reversed?: boolean;
   definitions?: KeyframeDefinitions;
+  enteringV?: any;
+  exitingV?: any;
 }
 
 export enum TransitionType {
   LINEAR,
   SEQUENCED,
   FADING,
   JUMPING,
+  ENTRY_EXIT,
 }
 
 export const AnimationsData: Record<string, AnimationData> = {

packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts

@@ -14,6 +14,7 @@ import { SequencedTransition } from './transition/Sequenced.web';
 import { FadingTransition } from './transition/Fading.web';
 import { JumpingTransition } from './transition/Jumping.web';
 import { insertWebAnimation } from './domUtils';
+import { EntryExitTransition } from './transition/EntryExit.web';
 
 type TransformType = NonNullable<TransformsStyle['transform']>;
 
@@ -108,13 +109,18 @@ export function TransitionGenerator(
         transitionData
       );
       break;
-
     case TransitionType.JUMPING:
       transitionObject = JumpingTransition(
         transitionKeyframeName,
         transitionData
       );
       break;
+    case TransitionType.ENTRY_EXIT:
+      transitionObject = EntryExitTransition(
+        transitionKeyframeName,
+        transitionData
+      );
+      break;
   }
 
   const transitionKeyframe =

packages/react-native-reanimated/src/layoutReanimation/web/transition/EntryExit.web.ts

@@ -0,0 +1,52 @@
+'use strict';
+import type { AnimationData, TransitionData } from '../animationParser';
+import { AnimationsData } from '../config';
+
+export function EntryExitTransition(
+  name: string,
+  transitionData: TransitionData
+) {
+  const exitingAnimationData = structuredClone(
+    AnimationsData[transitionData.exiting]
+  );
+  const enteringAnimationData = structuredClone(
+    AnimationsData[transitionData.entering]
+  );
+
+  const additionalData = {
+    translateX: `${transitionData.translateX}px`,
+    translateY: `${transitionData.translateY}px`,
+    scale: `${transitionData.scaleX},${transitionData.scaleY}`,
+  };
+
+  const keyframeData: AnimationData = {
+    name,
+    style:
+      '0' in exitingAnimationData.style
+        ? {}
+        : { 0: { transform: [additionalData] } },
+    duration: 300,
+  };
+
+  for (const [timestamp, styles] of Object.entries(
+    exitingAnimationData.style
+  )) {
+    if (styles.transform !== undefined) {
+      styles.transform.unshift(additionalData);
+    } else {
+      styles.transform = [additionalData];
+    }
+
+    const newTimestamp = parseInt(timestamp) / 2;
+
+    keyframeData.style[`${newTimestamp === 50 ? 49 : newTimestamp}`] = styles;
+  }
+
+  for (const [timestamp, styles] of Object.entries(
+    enteringAnimationData.style
+  )) {
+    keyframeData.style[parseInt(timestamp) / 2 + 50] = styles;
+  }
+
+  return keyframeData;
+}