feat(TransitionView): remove previous slide before continuing to next slide, enhance animation

Author: YossiSaadi

packages/core/src/components/SlideTransition/SlideTransition.module.scss

@@ -1,4 +1,4 @@
 .slide {
-  position: absolute;
+  height: 100%;
   width: 100%;
 }

packages/core/src/components/SlideTransition/SlideTransition.tsx

@@ -14,7 +14,6 @@ const SlideTransition = forwardRef(
         variants={slideAnimationVariants}
         initial="initial"
         animate="enter"
-        exit="exit"
         transition={slideAnimationTransition}
         className={cx(styles.slide, className)}
         style={style}

packages/core/src/components/SlideTransition/utils/animationVariants.ts

@@ -2,20 +2,14 @@ import { SlideDirection } from "../SlideTransition.types";
 
 export const slideAnimationVariants = {
   initial: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "10%" : "-10%",
-    opacity: 0
+    x: direction === "forward" ? "3%" : "-3%"
   }),
   enter: {
-    x: 0,
-    opacity: 1
-  },
-  exit: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "-10%" : "10%",
-    opacity: 0
-  })
+    x: 0
+  }
 };
 
 export const slideAnimationTransition = {
-  duration: 0.1,
+  duration: 0.25,
   ease: [0.0, 0.0, 0.4, 1.0]
 };

packages/core/src/components/TransitionView/TransitionView.module.scss

@@ -1,6 +1,5 @@
 .slideshow {
-  position: relative;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  min-height: 0;
 }

packages/core/src/components/TransitionView/TransitionView.tsx

@@ -1,46 +1,26 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef } from "react";
 import cx from "classnames";
 import { AnimatePresence } from "framer-motion";
 import { TransitionViewProps } from "./TransitionView.types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./TransitionView.module.scss";
 import SlideTransition from "../SlideTransition/SlideTransition";
-import useMergeRef from "../../hooks/useMergeRef";
 
 const TransitionView = forwardRef(
   (
-    { activeStep, direction, height, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
+    { activeStep, direction, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const componentRef = useRef<HTMLDivElement>(null);
-    const mergedRef = useMergeRef(ref, componentRef);
-    const slideTransitionRef = useRef<HTMLDivElement>(null);
-    const [contentHeight, setContentHeight] = useState<number | "100%">(height);
-    const slideTransitionHeight = height || contentHeight === "100%" || contentHeight > 0 ? "100%" : "auto";
-
-    useEffect(() => {
-      if (!slideTransitionRef.current) return;
-      // if parent has definite height, stretch component to fill it, otherwise use content height
-      setContentHeight(componentRef.current.clientHeight > 0 ? "100%" : slideTransitionRef.current.scrollHeight);
-    }, [height, slideTransitionRef]);
-
     return (
       <div
         id={id}
         className={cx(styles.slideshow, className)}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}
-        ref={mergedRef}
-        style={{ height: height ?? contentHeight }}
+        ref={ref}
       >
-        <AnimatePresence initial={false} custom={direction}>
-          <SlideTransition
-            key={activeStep}
-            direction={direction}
-            // it must be "auto" on initial load to consider scrollable content in contentHeight calculation
-            style={{ height: slideTransitionHeight }}
-            ref={slideTransitionRef}
-          >
+        <AnimatePresence initial={false} custom={direction} exitBeforeEnter>
+          <SlideTransition key={activeStep} direction={direction}>
             {children[activeStep]}
           </SlideTransition>
         </AnimatePresence>