[@mantine/core] Improve pop-* transitions animations (#5096)

Fixes #1657
mantinedev · Oct 22, 2023 · 8fe8b0b · 8fe8b0b
1 parent a8e1615
commit 8fe8b0b
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/mantine-core/src/components/Transition/transitions.ts b/src/mantine-core/src/components/Transition/transitions.ts
@@ -29,11 +29,11 @@ export type MantineTransitionName =
 
 export type MantineTransition = MantineTransitionName | MantineTransitionStyles;
 
-const popIn = {
+const popIn = (from: 'top' | 'bottom') => ({
   in: { opacity: 1, transform: 'scale(1)' },
-  out: { opacity: 0, transform: `scale(.9) translateY(${rem(10)})` },
+  out: { opacity: 0, transform: `scale(.9) translateY(${rem(from === 'bottom' ? 10 : -10)})` },
   transitionProperty: 'transform, opacity',
-};
+});
 
 export const transitions: Record<MantineTransitionName, MantineTransitionStyles> = {
   fade: {
@@ -120,27 +120,27 @@ export const transitions: Record<MantineTransitionName, MantineTransitionStyles>
   },
 
   pop: {
-    ...popIn,
+    ...popIn('bottom'),
     common: { transformOrigin: 'center center' },
   },
 
   'pop-bottom-left': {
-    ...popIn,
+    ...popIn('bottom'),
     common: { transformOrigin: 'bottom left' },
   },
 
   'pop-bottom-right': {
-    ...popIn,
+    ...popIn('bottom'),
     common: { transformOrigin: 'bottom right' },
   },
 
   'pop-top-left': {
-    ...popIn,
+    ...popIn('top'),
     common: { transformOrigin: 'top left' },
   },
 
   'pop-top-right': {
-    ...popIn,
+    ...popIn('top'),
     common: { transformOrigin: 'top right' },
   },
 };