🆙 Init V3

src/common/transitions/TransitionAnimation.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactNode, useEffect, useState } from 'react';
+import { Transition } from 'react-transition-group';
+import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
+
+interface TransitionAnimationProps
+{
+    type: string;
+    inProp: boolean;
+    timeout?: number;
+    className?: string;
+    children?: ReactNode;
+}
+
+export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
+{
+    const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
+
+    const [ isChildrenVisible, setChildrenVisible ] = useState(false);
+
+    useEffect(() =>
+    {
+        let timeoutData: ReturnType<typeof setTimeout> = null;
+
+        if(inProp)
+        {
+            setChildrenVisible(true);
+        }
+        else
+        {
+            timeoutData = setTimeout(() =>
+            {
+                setChildrenVisible(false);
+                clearTimeout(timeout);
+            }, timeout);
+        }
+
+        return () =>
+        {
+            if(timeoutData) clearTimeout(timeoutData);
+        };
+    }, [ inProp, timeout ]);
+
+    return (
+        <Transition in={ inProp } timeout={ timeout }>
+            { state => (
+                <div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
+                    { isChildrenVisible && children }
+                </div>
+            ) }
+        </Transition>
+    );
+};

src/common/transitions/TransitionAnimationStyles.ts

@@ -0,0 +1,136 @@
+import { CSSProperties } from 'react';
+import { TransitionStatus } from 'react-transition-group';
+import { ENTERING, EXITING } from 'react-transition-group/Transition';
+import { TransitionAnimationTypes } from './TransitionAnimationTypes';
+
+export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
+{
+    switch(type)
+    {
+        case TransitionAnimationTypes.BOUNCE:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'bounceIn',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'bounceOut',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.SLIDE_LEFT:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'slideInLeft',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'slideOutLeft',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.SLIDE_RIGHT:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'slideInRight',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'slideOutRight',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.FLIP_X:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'flipInX',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'flipOutX',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.FADE_UP:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'fadeInUp',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'fadeOutDown',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.FADE_IN:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'fadeIn',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'fadeOut',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.FADE_DOWN:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'fadeInDown',
+                        animationDuration: `${ timeout }ms`
+                    };
+                case EXITING:
+                    return {
+                        animationName: 'fadeOutUp',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+        case TransitionAnimationTypes.HEAD_SHAKE:
+            switch(transition)
+            {
+                default:
+                    return {};
+                case ENTERING:
+                    return {
+                        animationName: 'headShake',
+                        animationDuration: `${ timeout }ms`
+                    };
+            }
+    }
+
+    return null;
+}

src/common/transitions/TransitionAnimationTypes.ts

@@ -0,0 +1,11 @@
+export class TransitionAnimationTypes
+{
+    public static BOUNCE: string = 'bounce';
+    public static SLIDE_LEFT: string = 'slideLeft';
+    public static SLIDE_RIGHT: string = 'slideRight';
+    public static FLIP_X: string = 'flipX';
+    public static FADE_IN: string = 'fadeIn';
+    public static FADE_DOWN: string = 'fadeDown';
+    public static FADE_UP: string = 'fadeUp';
+    public static HEAD_SHAKE: string = 'headShake';
+}

src/common/transitions/index.ts

@@ -0,0 +1,3 @@
+export * from './TransitionAnimation';
+export * from './TransitionAnimationStyles';
+export * from './TransitionAnimationTypes';