blob: 7c8666861d4bc7ac8d93959c175bcdb304c09cef (
plain) (
tree)
|
|
import * as React from 'react';
import { Keyframes } from 'styled-components';
import { css, keyframes, styled } from '../../style/theme';
const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
from {
position: relative;
top: ${fromY};
}
to {
position: relative;
top: ${toY};
}
`;
export interface SlideAnimationProps {
keyframes: Keyframes;
animationType: string;
animationDirection?: string;
}
export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')`
animation-name: ${props =>
css`
${props.keyframes};
`};
animation-duration: 0.3s;
animation-timing-function: ${props => props.animationType};
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: ${props => props.animationDirection || 'none'};
position: relative;
`;
export interface SlideAnimationComponentProps {
downY: string;
}
export const SlideUpAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
<SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
{props.children}
</SlideAnimation>
);
export const SlideDownAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
<SlideAnimation
animationDirection="forwards"
animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
keyframes={slideKeyframeGenerator('0px', props.downY)}
>
{props.children}
</SlideAnimation>
);
|