오늘은 10월 20일 6일차이다.
목표
- 애니메이션 구현
진행
추가해야할 애니메이션은 3가지이다.
1. ENTER를 눌렀을 시 문자판이 차례로 뒤집히면서 색 변환
2. 문자를 키보드로 입력할 때 튀는 느낌
3. 정답일 시 단어 파도 타기
1번은 rotateX를 쓰면 될 것 같았지만 180도 돌리면 문자가 뒤집혀져 나왔다. 그리고 다시 원 상태로 돌아갔다. 찾아보니 앞면과 뒷면을 따로 만들어서 이 두 개를 묶는 div를 뒤집으면 되었다. 이때 묶는 div는 position이 relative여야하고, 앞, 뒷면은 absolute여야 한다. 그리고 뒷면은 180도 돌린 것이 정 방향이기 때문에 미리 180도 돌려놔야 한다. 또한 앞, 뒷면은 서로 같이 공존하면 안 되기 때문에 backface-visibility 속성을 hidden으로 하였다.
2번은 keyframes로 Popping 애니메이션을 만들어서 넣어줬다. transform: scale(110%, 110%) 정도로 하니까 괜찮게 느낌이 살았다.
3번은 1번만큼이나 오래 걸렸는데, 애니메이션을 어디 넣을지가 문제였다. 뒷면에 넣어보니 backspace-visibility 속성 때문에 보이지가 않았고, 앞/뒷면을 묶는 div에 넣으니 앞면 상태에서 애니메이션이 진행되었다. 그래서 애니메이션 구성을 할 때 어느 시점이든 rotateX(180deg)를 하여 항상 뒷면이 보이도록 조작하니까 원하는 느낌이 나왓다.
코드
transform-style: preserve-3d;
transform: ${ props =>
(props.state === 'correct' ||
props.state === 'all-correct' ||
props.state === 'contained' ||
props.state === 'non-contained')
&& 'rotateX(180deg)'
};
transition-delay: ${props => (props.index * delayTime)}ms;
transition-duration: ${durationTime}ms;1번 구현이다. 앞/뒷면을 묶는 div에 들어간다. 앞/뒷면을 rotateX(180deg)로 바꿔주었고, delay는 문자의 index에 따라 결정하여 차례대로 뒤집히는 효과를 주었다.
animation: ${ props =>
(props.state === 'filled' && 'Popping 50ms')
};
@keyframes Popping {
from {
width: 100%;
height: 100%;
}
to {
transform: scale(110%, 110%);
}
}2번 구현이다. 이거는 앞면에 들어가는 애니메이션이다. props.state가 'filled'일 때 애니메이션을 실행하도록 하였다.
animation: ${props => props.state === 'all-correct' ? `Waving 500ms ${props.index * (delayTime/4) + 2000}ms` : null};
@keyframes Waving {
0% { transform: rotateX(180deg) translate(0, 0px); }
50% { transform: rotateX(180deg) translate(0, 30px); }
100% { transform: rotateX(180deg) translate(0, 0px); }
}3번 구현이다. 앞/뒷면을 묶는 div에 들어간다. props.state가 'all-correct', 즉 정답일 때 실행한다. rotateX(180deg)를 각 시점에 넣어줘서 뒷면으로만 애니메이션이 진행되도록 하였다.
보충할 것
- CSS 애니메이션, 트랜지션 관련 내용 학습
- 코드 정리
내일 할 것
- 팝업 구현
- 몇 번만에 맞췄는지에 따라 특정 단어를 렌더링하는 기능(시간이 되면)
마무리
오늘도 많은 시간과 노력을 쏟았다. 확실히 CSS는 뭔가 다른 것 같다. 내가 원하는 대로 나오지 않는 경우가 훨씬 많고, 여러 케이스들을 고려해야 할 필요가 있다고 생각했다. 이번 주에 프론트를 끝내고 다음주에는 서버 개발을 할 수 있으면 좋겠다.
