Next.js에서 자연스러운 Page Transition 방법

Next.js에서 자연스러운 Page Transition 방법

react-spring 과 "next-page-transitions"을 이용한 두가지 방법을 아래와 같이 예제로 구현했다다.

아래는, react-spring을 사용한 예제이다. 조금 시간을 두고 기다리면 결과를 볼 수 있다.
여기에서, "About", "Hello Day" 등을 클릭하면, 화면(page)이 겹치며(overlapped) 바뀌는 것을 알 수 있다.




아래는, Next.js의 Page Transition은 "react-transition-group" 사용한 예제이다.



차이가 구분이 되는가?

둘다, 비슷해보이지만, next-page-transitions은 실제로 화면이 겹쳐지지 않고, 앞 페이지가 사라짐과 동시에 뒷 페이지를 나타내게 되어서 실제 DOM이 교체되어 버리기 때문에, 겹치며 사라지는 기능이 아니다.
반면, react-spring을 사용한 예제는, 앞 페이지가 뒷 페이지가 나타나서도 일시적으로 존재하는 구조로 되어, 겹치며 사라지는 화면을 구현할 수 있다.

실제 겹치며 사라지는 형태가 아니라, 페이지의 fade-in/out 정도와 같은 animation으로 충분하다면, 무엇을 사용하든 큰 문제가 되지 않는다.

* 출처
- react-spring: https://codesandbox.io/s/react-spring-nextjs-routes-q80c6
- next-page-transitions: https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions

댓글

이 블로그의 인기 게시물

JavaScript Object의 window와 window.opener간 전달할 때 주의할 점!

git flow avh 실행 오류