2021-04-21 05:36:39 +02:00
|
|
|
import { CSSProperties } from 'react';
|
|
|
|
import { TransitionStatus } from 'react-transition-group';
|
|
|
|
import { ENTERING, EXITING } from 'react-transition-group/Transition';
|
|
|
|
import { TransitionAnimationTypes } from './TransitionAnimation.types';
|
|
|
|
|
|
|
|
export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
|
|
|
|
{
|
|
|
|
switch(type)
|
|
|
|
{
|
|
|
|
case TransitionAnimationTypes.BOUNCE:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'bounceIn',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'bounceOut',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
case TransitionAnimationTypes.SLIDE_LEFT:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'slideInLeft',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'slideOutLeft',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
2021-06-22 11:52:47 +02:00
|
|
|
case TransitionAnimationTypes.SLIDE_RIGHT:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
|
|
|
return {}
|
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'slideInRight',
|
2021-06-22 11:52:47 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'slideOutRight',
|
2021-06-22 11:52:47 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
2021-04-21 05:36:39 +02:00
|
|
|
case TransitionAnimationTypes.FLIP_X:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'flipInX',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'flipOutX',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
case TransitionAnimationTypes.FADE_UP:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeInUp',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeOutDown',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
2021-04-21 22:32:31 +02:00
|
|
|
case TransitionAnimationTypes.FADE_IN:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 22:32:31 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeIn',
|
2021-04-21 22:32:31 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeOut',
|
2021-04-21 22:32:31 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
2021-04-21 05:36:39 +02:00
|
|
|
case TransitionAnimationTypes.FADE_DOWN:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeInDown',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
case EXITING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'fadeOutUp',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
case TransitionAnimationTypes.HEAD_SHAKE:
|
|
|
|
switch(transition)
|
|
|
|
{
|
|
|
|
default:
|
2021-05-12 03:33:01 +02:00
|
|
|
return {}
|
2021-04-21 05:36:39 +02:00
|
|
|
case ENTERING:
|
|
|
|
return {
|
2021-08-16 08:00:31 +02:00
|
|
|
animationName: 'headShake',
|
2021-04-21 05:36:39 +02:00
|
|
|
animationDuration: `${ timeout }ms`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|