mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 11:43:07 +02:00
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
|
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:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `bounceIn`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
case EXITING:
|
||
|
return {
|
||
|
animationName: `bounceOut`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
case TransitionAnimationTypes.SLIDE_LEFT:
|
||
|
switch(transition)
|
||
|
{
|
||
|
default:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `slideInLeft`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
case EXITING:
|
||
|
return {
|
||
|
animationName: `slideOutLeft`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
case TransitionAnimationTypes.FLIP_X:
|
||
|
switch(transition)
|
||
|
{
|
||
|
default:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `flipInX`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
case EXITING:
|
||
|
return {
|
||
|
animationName: `flipOutX`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
case TransitionAnimationTypes.FADE_UP:
|
||
|
switch(transition)
|
||
|
{
|
||
|
default:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `fadeInUp`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
case EXITING:
|
||
|
return {
|
||
|
animationName: `fadeOutDown`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
case TransitionAnimationTypes.FADE_DOWN:
|
||
|
switch(transition)
|
||
|
{
|
||
|
default:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `fadeInDown`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
case EXITING:
|
||
|
return {
|
||
|
animationName: `fadeOutUp`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
case TransitionAnimationTypes.HEAD_SHAKE:
|
||
|
switch(transition)
|
||
|
{
|
||
|
default:
|
||
|
case ENTERING:
|
||
|
return {
|
||
|
animationName: `headShake`,
|
||
|
animationDuration: `${ timeout }ms`
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return null;
|
||
|
}
|