diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:27:24 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:27:24 +0800 |
| commit | 2340813149c966a66ff24254941e4fb4ec0d1071 (patch) | |
| tree | 7813fdb9898c193f7feb49113be80915381c01d2 /packages | |
| parent | 405667fa833413863809bbea83bf6fab8a589e87 (diff) | |
| download | dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.gz dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.zst dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.zip | |
Tests addAnimation method
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 21 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/animations.tsx | 8 |
2 files changed, 13 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 823529556..d5a503337 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import {fadeIn} from 'ts/@next/constants/animations'; +import {addFadeInAnimation, fadeIn} from 'ts/@next/constants/animations'; interface Props { title: string; @@ -69,9 +69,7 @@ const Title = styled.h1` font-weight: 300; line-height: 1.1; margin-bottom: 30px; - opacity: 0; - transform: translateY(10px); - animation: ${fadeIn} 0.5s forwards; + ${addFadeInAnimation('0.5s')} @media (max-width: 1024px) { font-size: 60px; @@ -87,10 +85,8 @@ const Description = styled.p` line-height: 31px; padding: 0; margin-bottom: 30px; - opacity: 0.75; - opacity: 0; - transform: translateY(0); - animation: ${fadeIn} 0.5s 0.15s forwards; + color: rgba(255, 255, 255, 0.75); + ${addFadeInAnimation('0.5s', '0.15s')} `; const Content = styled.div` @@ -105,19 +101,14 @@ const ButtonWrap = styled.div` display: inline-flex; align-items: center; - > * { - opacity: 0; - transform: translateY(10px); - } - * + * { margin-left: 12px; } > *:nth-child(1) { - animation: ${fadeIn} 0.6s 0.3s forwards; + ${addFadeInAnimation('0.6s', '0.3s')} } > *:nth-child(2) { - animation: ${fadeIn} 0.6s 0.4s forwards; + ${addFadeInAnimation('0.6s', '0.4s')} } `; diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/@next/constants/animations.tsx index aed6ffec7..6a58c4b40 100644 --- a/packages/website/ts/@next/constants/animations.tsx +++ b/packages/website/ts/@next/constants/animations.tsx @@ -1,4 +1,4 @@ -import { keyframes } from 'styled-components'; +import { css, keyframes } from 'styled-components'; export const fadeIn = keyframes` 0% { @@ -10,3 +10,9 @@ export const fadeIn = keyframes` opacity: 1; } `; + +export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css` + opacity: 0; + transform: translateY(10px); + animation: ${fadeIn} ${duration} ${delay} forwards; +`; |