diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-12-18 04:23:08 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-12-18 06:31:14 +0800 |
commit | c4036d7d0f0b0aa2491b67ea882365858574d440 (patch) | |
tree | a83587b2104832cc2e3d21f8a6b8e5d1415226eb /packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | |
parent | 30ccddf0d521f0721f475ae75039fdb966ff7ab0 (diff) | |
download | dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.gz dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.bz2 dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.lz dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.xz dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.zst dexon-sol-tools-c4036d7d0f0b0aa2491b67ea882365858574d440.zip |
fix(website): update Animation component for styled components v4
Diffstat (limited to 'packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx')
-rw-r--r-- | packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx new file mode 100644 index 000000000..176c9410c --- /dev/null +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { css, keyframes, styled } from 'ts/style/theme'; + +const appearFromBottomFrames = keyframes` + from { + position: fixed; + bottom: -500px; + left: 0px; + right: 0px; + } + + to { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + } +`; + +const stylesForAnimation = css` + position: fixed; +`; +const animations = css` + animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; +`; + +export const EaseUpFromBottomAnimation = styled.div` + ${props => animations}; + ${props => stylesForAnimation}; +`; + +EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; |