fix(SlideTransition): fix animation, allow passing style

mondaycom · Nov 13, 2024 · 45fcf02 · 45fcf02
1 parent 717f8c4
commit 45fcf02
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/core/src/components/SlideTransition/SlideTransition.module.scss b/packages/core/src/components/SlideTransition/SlideTransition.module.scss
@@ -1,5 +1,4 @@
 .slide {
   position: absolute;
   width: 100%;
-  height: 100%;
 }
diff --git a/packages/core/src/components/SlideTransition/SlideTransition.tsx b/packages/core/src/components/SlideTransition/SlideTransition.tsx
@@ -6,7 +6,7 @@ import { SlideTransitionProps } from "./SlideTransition.types";
 import styles from "./SlideTransition.module.scss";
 
 const SlideTransition = forwardRef(
-  ({ direction, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+  ({ direction, style, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     return (
       <motion.div
         ref={ref}
@@ -17,6 +17,7 @@ const SlideTransition = forwardRef(
         exit="exit"
         transition={slideAnimationTransition}
         className={cx(styles.slide, className)}
+        style={style}
       >
         {children}
       </motion.div>

diff --git a/packages/core/src/components/SlideTransition/SlideTransition.types.ts b/packages/core/src/components/SlideTransition/SlideTransition.types.ts
@@ -3,6 +3,7 @@ import { VibeComponentProps } from "../../types";
 
 export interface SlideTransitionProps extends VibeComponentProps {
   direction: SlideDirection;
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }
 

diff --git a/packages/core/src/components/SlideTransition/utils/animationVariants.ts b/packages/core/src/components/SlideTransition/utils/animationVariants.ts
@@ -2,17 +2,20 @@ import { SlideDirection } from "../SlideTransition.types";
 
 export const slideAnimationVariants = {
   initial: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "10%" : "-10%"
+    x: direction === "forward" ? "10%" : "-10%",
+    opacity: 0
   }),
   enter: {
-    x: 0
+    x: 0,
+    opacity: 1
   },
   exit: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "-100%" : "100%"
+    x: direction === "forward" ? "-10%" : "10%",
+    opacity: 0
   })
 };
 
 export const slideAnimationTransition = {
-  duration: 0.2,
+  duration: 0.1,
   ease: [0.0, 0.0, 0.4, 1.0]
 };