diff --git a/packages/core/src/components/SlideTransition/SlideTransition.module.scss b/packages/core/src/components/SlideTransition/SlideTransition.module.scss index 7a0e46db1f..23b4fb32fb 100644 --- a/packages/core/src/components/SlideTransition/SlideTransition.module.scss +++ b/packages/core/src/components/SlideTransition/SlideTransition.module.scss @@ -1,4 +1,4 @@ .slide { - position: absolute; + height: 100%; width: 100%; } diff --git a/packages/core/src/components/SlideTransition/SlideTransition.tsx b/packages/core/src/components/SlideTransition/SlideTransition.tsx index 990073a8dc..fb2e88c508 100644 --- a/packages/core/src/components/SlideTransition/SlideTransition.tsx +++ b/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} diff --git a/packages/core/src/components/SlideTransition/utils/animationVariants.ts b/packages/core/src/components/SlideTransition/utils/animationVariants.ts index 79ce19f9ab..c13a0e1b57 100644 --- a/packages/core/src/components/SlideTransition/utils/animationVariants.ts +++ b/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] }; diff --git a/packages/core/src/components/TransitionView/TransitionView.module.scss b/packages/core/src/components/TransitionView/TransitionView.module.scss index e647894dff..27ad2ef7e5 100644 --- a/packages/core/src/components/TransitionView/TransitionView.module.scss +++ b/packages/core/src/components/TransitionView/TransitionView.module.scss @@ -1,6 +1,5 @@ .slideshow { - position: relative; width: 100%; height: 100%; - overflow: hidden; + min-height: 0; } diff --git a/packages/core/src/components/TransitionView/TransitionView.tsx b/packages/core/src/components/TransitionView/TransitionView.tsx index e0e085d7e5..ed76861248 100644 --- a/packages/core/src/components/TransitionView/TransitionView.tsx +++ b/packages/core/src/components/TransitionView/TransitionView.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,41 +6,21 @@ 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 ) => { - const componentRef = useRef(null); - const mergedRef = useMergeRef(ref, componentRef); - const slideTransitionRef = useRef(null); - const [contentHeight, setContentHeight] = useState(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 (
- - + + {children[activeStep]} diff --git a/packages/core/src/components/TransitionView/TransitionView.types.ts b/packages/core/src/components/TransitionView/TransitionView.types.ts index abc6c456d8..6dba5251e4 100644 --- a/packages/core/src/components/TransitionView/TransitionView.types.ts +++ b/packages/core/src/components/TransitionView/TransitionView.types.ts @@ -5,7 +5,6 @@ import { SlideDirection } from "../SlideTransition/SlideTransition.types"; export interface TransitionViewProps extends VibeComponentProps { activeStep: number; direction: TransitionDirection; - height?: number; children: React.ReactNode[]; }