CoCoa Talk 8 - 4 animation

이번엔 채팅창 애니메이션을 추가해보자

 

먼저 fadeIn을 만들어 본다~

@keyframes를 이용해 fadin method를 하나 만들어준다

시작은 translateY(30px)로 투명도 0을 주고 마무리는 transform : none; 투명도 1을 줘서

아래서 위로 올라오는 메소드이다.

원래 메인 챗에 전부 적용 했으나 메세지 박스는 좌우로 페이드인 시켜주기 위해

타임스탬프에 animation효과를 주었다

그리고 좌우측에서 fadein효과를 만드는 메소드를 두개 만들어서

message-row에 좌측 페이드인 message-row--own에 우측 페이드인을 줬다

 

이어서 reply박스에 효과를 준다.

여기서 focus-within을 사용했다.

focus-within pseudo class는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타낸다

:focus pseudo class와 일치하거나 그 자손 중 하나가 :focus와 일치하는 요소를 나타냄

흔히 쓸 수 있는 예시로 form태그의 input필드 중 하나가 포커스 된 경우 전체 form을 강조해야 할 때 유용하다한다

developer.mozilla.org/ko/docs/Web/CSS/:focus-within

:focus-within - CSS: Cascading Style Sheets | MDN

먼저 reply에 focus-within을 주고  첫번째 자식 reply__column과

스마일 아이콘 버튼을 투명도 0을 줘서 인풋박스에 마우스 클릭시 아이콘들과 버튼을 사라지게한다

그리고 인풋박스가 화면 크기만큼 커지게 하기 위해

.reply:focus-within input을 이용해 width: 98vw로 줘서 커지게 한다 오른쪽으로 치우쳐 있다

translateX(-13%) 을 주자. 그리고 root요소에 transition을 줘서 부드럽게 보이도록 한다.

그리고 아이콘들과 버튼이 자연스럽게 사라지게 하기 위해 역시 transition을 준다.

그리고 배경을 날리고 인풋박스만 보이게 하기 위해

'

.reply:focus-within {

transform: translateY(80px);

}

해주고 인풋에 translateY(-80px)을 준다 

잊지말자 루트요소인 reply에 transition을 준다.