KokoaTalk Clone Coding: more(animation) 2

chat-room 에서 수신하는 message는 message-row가 왼쪽에서 나타나도록 animation

translate를 이용해서 x축으로 움직임

 

발신하는 message는 message-row--own이 오른쪽에서 나타나도록 animation

앞서 실행한 message-row가 실행되고 이후에 실행되도록

실행시간만큼 animation을 지연시켜주고, 그동안 보이지 않도록 default를 opacity: 0; 으로 설정하고 forwards로 마지막 설정을 기억

 

 

완성

 

focus-within: reply 내부에 focus 된 element가 있는지 확인

만약 reply에서 어떠한 element 가 focus 되어 있다면, 앞의 내용이 참이 되면서 뒤에 내용을 실행함

 

reply 내부에서 어떠한 element 가 focus 되면 input의 너비와 위치가 바뀜

너비는 97 view point width로 넓혀주고, input이 reply__column에서 92%를 차지하고 있으므로 10%를 왼쪽으로 더 움직여줌

 

input이 focus 될 때 부드럽게 실행되도록 조정

 

다른 focus도 마찬가지로 부드럽게 조정

혹은

 

opacity의 transition을 조정

 

완성

 

reply를 focus하면 input을 제외한 다른 element는 아래로 움직이며 사라지고 입력창만 남도록 함

 

마찬가지로 부드럽게 움직일 수 있도록 조정

 

완성