웹상에서 애니메이션은 정말 힘들다.

페이드아웃 애니메이션은 간단해 보이지만 굉장히 복잡하다.

위 애니메이션의 컴포지팅과 애니메이션이 메인 스레드와 떨어져서 발생합니다. 그렇기 때문에 메인스레드가 상태가 좋지 않더라도 스무스하게 동작합니다.

만약 자바스크립트로 아래처럼 페이드인을 구현하려고 했었다면

어떤가 괜찮은가?

테스트 결과 실제로 브라우저가 다르게 동작했다. 브라우저는 append 이전의 opacity = 0 을 단지 자바스크립트 값으로 생각하고 전혀 스타일링을 계산하지 않았습니다.

이 문제를 해결하기 위해 브라우저에 스타일을 밀어 넣어야 한다.

getComputedStyle을 사용하여 브라우저가 스타일에 대해 생각하고 opacity 0 을 계산한다.

다음은 어떤가?

이 경우 복잡한 애니메이션은 다른 요소에 의한 transition이 있는 경우에도 이벤트가 발생하기 때문에 정확하게 요소를 확인해야 한다.