JavaScript는 썸네일에서 전체 너비 이미지 페이지로의 원활한 전환을 구현합니다.

Question

http://manifesto.clapat.com/ 홈 페이지의 항목을 클릭하면 해당 항목 페이지의 제목이 될 썸네일에서 전체 화면 이미지로 전환됩니다. 이러한 전환 효과는 어떻게 생성되며 ReactRouter 대신 내부 라우팅을 사용하여 이를 구현하는 가장 좋은 방법은 무엇입니까? 누군가가 ReactRouter에서 작동하도록 할 수 있다면 저도 그것을 포팅할 수 있습니다. 사용 가능한 몇 가지 튜토리얼이 있지만 모두 다른/프로젝트 페이지로 이동하는 대신 전체 화면 모달 구성 요소와 유사하게 동일한 페이지에 데이터를 로드합니다.

P粉677573079 · Answer

이 효과를 얻으려면 서버 측 렌더링이 필요합니다. 일반 렌더링 방법은 페이지로 이동한 후에만 이미지 로드를 시작하기 때문입니다. Next.js에서 Link 요소를 통해 액세스되는 모든 페이지는 해당 페이지를 가리키는 요소가 포함된 페이지에 있는 한 사전 렌더링됩니다.

이 효과를 얻으려면 먼저 CSS에서 이미지 위치를 고정으로 설정한 다음 전환 효과를 생성하고 이미지 크기를 너비: 100% 및 높이: 100%로 조정하고 전환 시간을 500밀리초로 설정해야 합니다. , 또한 전환이 끝난 후 이미지가 배경으로 있는 다음 페이지로 자동으로 이동하는 타이머를 설정해야 합니다. 이 작업을 수행해야 하는지는 모르겠지만 어딘가에 를 포함하면 페이지가 사전 렌더링되고 페이지로 라우팅될 때 이미지가 즉시 로드됩니다.

첫 번째 페이지:

으아아아

다음 페이지:

으아아아

이 예제는 더 쉽게 읽을 수 있도록 tailwindcss에 작성했지만 다른 CSS 라이브러리에서도 동일한 효과를 얻을 수 있습니다. 전환을 원활하게 진행하려면 전환 기간과 setTimeout 기간을 동일하게 설정하면 전환이 완료되고 두 페이지의 이미지가 정확히 동일할 때만 페이지가 리디렉션됩니다.

원하는 답변이 되었기를 바랍니다. 예제의 클래스가 수행하는 작업을 확인하려면 tailwindcss 문서를 확인하세요.