Add transitions

src/transitions/FadeTransition.tsx

@@ -0,0 +1,23 @@
+import { Transition } from 'react-transition-group';
+import { FadeTransitionProps } from './FadeTransition.types';
+import { getTransitionStyle, transitionTypes } from './TransitionStyles';
+
+export function FadeTransition(props: FadeTransitionProps): JSX.Element
+{
+    const { inProp = false, timeout = 300 } = props;
+
+    const style = getTransitionStyle('ease-in-out', timeout);
+
+    return (
+        <Transition in={ inProp } timeout={ timeout }>
+            {state => (
+                <div style={{
+                    ...style,
+                    ...transitionTypes[state]
+                }}>
+                    { props.children }
+                </div>
+            )}
+        </Transition>
+    );
+}

src/transitions/FadeTransition.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface FadeTransitionProps
+{
+    inProp: boolean;
+    timeout?: number;
+    children?: ReactNode
+}

src/transitions/TransitionStyles.ts

@@ -0,0 +1,18 @@
+export const transitionTypes = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+    exited: { opacity: 0 },
+};
+
+export function getTransitionStyle(type: string, timeout: number = 300): Partial<CSSStyleDeclaration>
+{
+    switch(type)
+    {
+        case 'ease-in-out':
+            return {
+                transition: `opacity ${ timeout }ms ease-in-out`,
+                opacity: '0'
+            }
+    }
+}