Settings and notifications

2020-12-24 17:24:38 -06:00
parent 06c1a8f71d
commit 0b31a80d02
9 changed files with 253 additions and 5 deletions
@@ -1,8 +1,36 @@
 import classNames from 'classnames';

+import { Transition } from 'react-transition-group';
+
+const duration = 500;
+
+const defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0,
+};
+
+const transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};
+
 const PageStack = ({ children, className, ...props }) => (
  <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
-    {children}
+    <Transition in={true} duration={duration}>
+      {state => (
+        <div
+          className="w-full h-full"
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
  </div>
 );