간단한 pure JS & CSS와 AJAX 활용 페이지 트랜지션

페이지 트랜지션을 만드는 방법에 있어서, swup 같은 라이브러리를 이용할 수도 있고 GSAP과 같은 advanced한 애니메이션 라이브러리를 활용할 수 있을 것입니다. 이 포스트에서는 기초 학습 차원에서 pure JS, CSS, AJAX(xhttp)를 이용해서 간단한 페이지 트랜지션을 만드는 방법을 학습하고자 했으며, 이를 구현해 보았습니다.

 

1. 기본적인 원리는 overlay-screen이라는 클래스의 z-index 최상위 값을 갖는 요소를 width와 height를 0으로 숨겨 놓습니다.
2. AJAX 콜을 날릴 때 overlay-screen에 width와 height을 변경시키는 애니메이션을 classList.add()를 통해 걸어 줍니다.
3. animationend 이벤트를 받아서 classList.remove()로 애니메이션을 제거하여, 다른 메뉴에도 적용 가능하게 합니다.

추가 내용은 위 첨부된 코드를 통해서 확인하는 것을 권장드리며, 관련 참고자료를 통해 학습한 부분이므로 참고자료들을 함께 기재해 놓음으로서 이걸 보시는 분들이 학습을 진행하실 수 있도록 돕고자 합니다. 코드는 학습용 수준이므로 이 점 참고 바라겠습니다. 

 

참고자료

• codyhouse.co/gem/animated-page-transition-2/
• www.endyourif.com/transitioning-ajax-content-into-view-with-css3-animations/