diff options
Diffstat (limited to 'packages/instant/src/components/animations/slide_animations.tsx')
-rw-r--r-- | packages/instant/src/components/animations/slide_animations.tsx | 58 |
1 files changed, 9 insertions, 49 deletions
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 84280372b..99533a2f0 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -3,56 +3,16 @@ 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}; - } -`; +import { PositionAnimation, PositionAnimationProps } from './position_animation'; +export type SlideAnimationPhase = 'slideIn' | 'slideOut'; export interface SlideAnimationProps { - keyframes: Keyframes; - animationType: string; - animationDirection?: string; + phase: SlideAnimationPhase; + slideIn: PositionAnimationProps; + slideOut: PositionAnimationProps; } -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - 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> -); +export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => { + const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; + return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>; +}; |