QUESTION
twittler 과제에서 comment를 작성하고 추가할 때, template 태그 방식을 이용했고 생성한 element를 commentContainer에 appendChild하는 방식으로 구현했습니다. 추가로, 댓글이 나타날 때 애니메이션을 넣어서 아래로 천천히 내려가며 등장하게 하려면 어떻게 해야할지 궁금합니다!
쉽게 말해 새로운 element를 생성하고, 생성된 element에 animation을 추가시키는 방법에 대해 질문했다.
엄밀히 따지면 transition과 animation은 구별되지만 넓은 의미로 보고 넘어가겠다.
먼저, 급한 마음에 엉망으로 쓴 질문글에 친절하고 정확하게 답변해 주신 엔지니어님께 존경과 감사의 뜻을 올립니다.
ANSWER
createElement로 element 생성 후 animation 추가하기
element를 추가하는 기본적인 방법에서 진행해 보았다.
추가적으로, element.classList.add 메서드로 새로운 클래스 이름을 부여했다. 이러면 해당 선택자에 CSS 효과가 적용된다. 그리고, transition 효과를 주기 위해 새로운 클래스 이름을 부여하면 된다. 특이한 점은 두 번째 클래스 이름 추가는 setTimeout 안에 가둬서 약간의 딜레이를 준다는 점이다. 그렇지 않으면 동작하지 않는다. 이유는 마지막에 후술했다.
아래에서 위로 올라가는 모습은 padding-top으로 꼼수를 부려놓은 것이다. transform으로 구현하는 것이 좋을까? 아직 고민 중이다.
template으로 element를 생성 후 animation 추가하기
이제 내가 제작한 twittler에 써먹기 위해 template 태그를 통해 element를 생성했다. 이번엔 prepend 메서드로 element를 추가해보았다. 댓글이 위에 쌓이는 모습을 확인할 수 있다. 이번에도 위와 같은 방법으로 newTemplate에 클래스 이름을 붙이려고 했지만, classList가 undefined라는 에러가 발생한다. template을 통해 생성된 element는 documentFragment라는 독자적인 문서 객체로, 문서 트리의 일부가 아니기 때문에 classList가 없는 것이라고 한다. 그래도, 추가한 element를 document에서 찾아서 거기에 클래스 이름을 추가해주기만 하면 된다.
fade animation을 추가하고,prepend 메서드로 댓글이 위에서 생성되게 한 것까지는 좋지만, 아쉬운 점은 천천히 위에서 아래로 내려오는 animation을 구현하지 못했다는 점이다. 일단, container 전체가 내려감과 동시에 추가된 댓글이 같이 내려오는 방식으로 구현해야 하는데 그것을 어떻게 해야 할지 감이 잡히질 않는다. onclick 이벤트에서 container에게 클래스 이름을 지웠다 추가했다를 반복하면 될까? 나중에 시도해봐야겠다.
setTimeout을 사용해야 하는 이유?
해당 내용은 나중에 물어보려고 벼르던 내용을 우연히 찾아내서 추가한 내용이다.
setTimeout 함수를 사용하여 약간의 지연을 줘야 하는 이유는 여기에서 찾았다.
Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.
출처: https://drafts.csswg.org/css-transitions/#style-change-event
문장이 전혀 끊길 기미가 안보여서 해석하기 정말 난해하지만, 중요한 것은 이벤트가 실행되는 것과 값의 할당이 어느 시점에서 일어날지 명확하지 않기 때문에, 값의 할당과 이벤트의 발생의 순서를 브라우저에게 알려주고자 setTimeout 함수를 사용한 것으로 보인다. 실제로 setTimeout의 delay를 0을 줬을 때, 브라우저마다 그리고 매 실행마다 결과가 다른 것을 확인할 수 있다.
