1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

chore: new animation

This commit is contained in:
uetchy 2020-03-07 13:16:01 +09:00
parent adacd60426
commit cbecbdbb2c
2 changed files with 5 additions and 24 deletions

View File

@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next';
import {Link, useHistory} from 'react-router-dom';
import {sanitize} from '../util/text';
import {sendQueryEvent} from '../util/analytics';
import {mobile, slideUp} from '../util/css';
import {mobile} from '../util/css';
import Suggestion from './Suggestion';
import {useDeferredState} from '../util/hooks';
@ -14,7 +14,6 @@ const Form: React.FC<{
const history = useHistory();
const [inputValue, setInputValue] = useState(initialValue);
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
const [isFocused, setFocus] = useState(false);
const [suggested, setSuggested] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const {t} = useTranslation();
@ -66,18 +65,12 @@ const Form: React.FC<{
<form onSubmit={onSubmitQuery}>
<InputView
onChange={onInputChange}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
onBlur={onSubmitQuery}
value={inputValue}
ref={inputRef}
placeholder={t('placeholder')}
aria-label="search form"
/>
{isFocused && (
<Tips>
<span>{t('pressEnterToSearch')}</span>
</Tips>
)}
</form>
{queryGiven && !suggested ? (
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
@ -126,8 +119,7 @@ const LogoImage = styled.img`
`;
const InputView = styled.input.attrs({
type: 'input',
name: 'search',
type: 'search',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
@ -140,6 +132,7 @@ const InputView = styled.input.attrs({
font-family: 'Montserrat', monospace;
font-weight: 600;
font-size: 6rem;
appearance: none;
${mobile} {
font-size: 2rem;
@ -149,15 +142,3 @@ const InputView = styled.input.attrs({
color: #c8cdda;
}
`;
const Tips = styled.div`
color: #ababab;
text-align: center;
overflow: hidden;
span {
display: block;
animation: ${slideUp} 0.6s cubic-bezier(0.19, 1, 0.22, 1);
animation-fill-mode: both;
}
`;

View File

@ -4,7 +4,7 @@ export const mobile = '@media screen and (max-width: 800px)';
export const slideUp = keyframes`
from {
transform: translateY(100%);
transform: translateY(150%) skewY(10deg);
}
to {
transform: translateY(0);