feat: add new transitions

p3ol · Oct 27, 2023 · 8234958 · 8234958
1 parent cd0d4b2
commit 8234958
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 32 deletions.
diff --git a/packages/theme/lib/transitions.sass b/packages/theme/lib/transitions.sass
@@ -1,3 +1,49 @@
+.jp-slide-in-up
+  &-enter, &-appear
+    opacity: 0
+    transform: translate3d(0, 10px, 0)
+
+    &-active
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
+  &-exit
+    opacity: 1
+    transform: translate3d(0, 0, 0)
+
+    &-active
+      opacity: 0
+      transform: translate3d(0, 10px, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
+.jp-slide-in-down
+  &-enter, &-appear
+    opacity: 0
+    transform: translate3d(0, -10px, 0)
+
+    &-active
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
+  &-exit
+    opacity: 1
+    transform: translate3d(0, 0, 0)
+
+    &-active
+      opacity: 0
+      transform: translate3d(0, -10px, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
 .jp-slide-in-up-menu
   &-enter
     opacity: 0

diff --git a/packages/transitions/lib/index.js b/packages/transitions/lib/index.js
@@ -1,45 +1,34 @@
 import { Transition } from '@junipero/react';
 
-export const animateMenu = (
+export const animate = (
   name,
   { time = 100, key, ...opts } = {}
-) =>
-  (menu, { opened, key: k, ...props } = {}) => (
-    <Transition
-      in={opened}
-      mountOnEnter={true}
-      unmountOnExit={true}
-      timeout={time}
-      name={name}
-      children={menu}
-      { ...opts }
-      { ...props }
-      key={k ?? key}
-    />
-  );
+) => (menu, { opened, key: k, ...props } = {}) => (
+  <Transition
+    in={opened}
+    mountOnEnter={true}
+    unmountOnExit={true}
+    timeout={time}
+    name={name}
+    children={menu}
+    { ...opts }
+    { ...props }
+    key={k ?? key}
+  />
+);
 
-export const slideInUpMenu = animateMenu('jp-slide-in-up-menu');
-export const slideInDownMenu = animateMenu('jp-slide-in-down-menu');
+export const slideInUpMenu = animate('jp-slide-in-up-menu');
+export const slideInDownMenu = animate('jp-slide-in-down-menu');
 
 export const animateModal = (
   name,
-  { time = 300, key, ...opts } = {}
-) =>
-  (modal, { opened, key: k, ...props } = {}) => (
-    <Transition
-      in={opened}
-      mountOnEnter={true}
-      unmountOnExit={true}
-      timeout={time}
-      name={name}
-      children={modal}
-      { ...opts }
-      { ...props }
-      key={k ?? key}
-    />
-  );
+  { time = 300, ...opts } = {}
+) => animate(name, { time, ...opts });
 
 export const slideInUpModal = animateModal('jp-slide-in-up-modal');
 export const slideInLeftModal = animateModal('jp-slide-in-left-modal');
 export const appearBounceModal = animateModal('jp-appear-bounce-modal',
   { time: 200 });
+
+export const slideInUp = animate('jp-slide-in-up', { time: 200 });
+export const slideInDown = animate('jp-slide-in-down', { time: 200 });