next page transitions
v1.0.0-beta.2
Next.js 앱의 간단하고 사용자 정의 가능한 페이지 전환
데모 : https://next-page-transitions.now.sh/
간단히 말해서 Next.js를 사용하여 앱 빌드에 페이지 전환을 쉽게 추가 할 수 있습니다. 다른 프레임 워크와 함께 작동 할 수 있지만 새로운 App 구성 요소와 다음에 페이지를 처리하는 방식을 중심으로 설계되었습니다. 특히, 한 페이지 구성 요소 만 한 번에 장착하고 다음 페이지가 종료 애니메이션을 완료 할 때까지 다음 페이지가 장착되지 않도록하는 문제를 해결합니다. 또한 페이지 구성 요소가 표시되기 전에 데이터를로드 해야하는 경우로드 표시기를 표시하는 것이 내장되어 있습니다.
예제로 배우기를 원한다면이 라이브러리를 사용하는 방법을 보여주는 Next.js 앱의 examples 디렉토리를 확인하십시오.
먼저 패키지를 설치하십시오.
npm install --save next-page-transitions
다음으로 앱에 사용자 정의 App 구성 요소가 있는지 확인하십시오. 그렇지 않은 경우 다음에 예제를 따르십시오 .js readme를 만들려면 하나를 만듭니다. 그런 다음 App 렌더 메소드에서 페이지 Component PageTransition 구성 요소로 감습니다. 또한 원하는 전환 애니메이션을 달성하는 자신의 CSS 클래스를 정의해야합니다. 이 라이브러리를 간단하게 유지하고 사람들이 CS를 생산하고 소비하는 다양한 방법을 설명하기 위해 내장 스타일을 제공하지 않으며 스타일이 페이지에서 어떻게 끝나는 지에 대한 특별한 의견이 없습니다. 아래 예제에는 페이지가 끊어 지거나 사라지는 간단한 전환이 있습니다.
import App , { Container } from 'next/app'
import React from 'react'
import { PageTransition } from 'next-page-transitions'
export default class MyApp extends App {
static async getInitialProps ( { Component , router , ctx } ) {
let pageProps = { }
if ( Component . getInitialProps ) {
pageProps = await Component . getInitialProps ( ctx )
}
return { pageProps }
}
render ( ) {
const { Component , pageProps , router } = this . props
return (
< Container >
< PageTransition timeout = { 300 } classNames = "page-transition" >
< Component { ... pageProps } key = { router . route } />
</ PageTransition >
< style jsx global > { `
.page-transition-enter {
opacity: 0;
}
.page-transition-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity 300ms;
}
` } </ style >
</ Container >
)
}
} 새 페이지로 이동하면 key 소품이 변경되며 PageTransition 구성 요소가이를 감지합니다. 페이지를 즉시 꺼내지 않고 page-transition-exit 클래스를 페이지 주변의 래퍼에 적용하여 "종료"전환을 초기화 한 다음 page-transition-exit-active 클래스를 적용하여 전환을 시작합니다. 이는 React-Transition 그룹 라이브러리가 수행하는 방식과 매우 유사합니다. 이전 페이지가 애니메이션이 끝나면 새 페이지가 장착되고 비슷한 .page-transition-enter and page-transition-enter-active 클래스가 적용됩니다. 이 프로세스는 새 페이지를 탐색 할 때마다 반복됩니다.
참고 : 이전 버전의 next-page-transitions 에서는 PageTransition 의 Children of Pagle의 key 소품을 지정할 필요가 없었습니다. 그러나 핫 모듈 재 장전을 올바르게 작동 시키려면이 소품을 요구할 필요가있었습니다. 호속적인 모습, key 소품을 지정하지 않는 어린이는 콘솔에서 경고를 유발합니다. 앞으로 이것은 런타임 오류가 될 수 있습니다.
콘텐츠를 표시하기 전에 네트워크 요청을 해야하는 페이지가 있다고 가정 해 봅시다. 페이지 자체가 준비가 될 때까지 로딩 스피너를 렌더링 할 수 있지만, 완벽한 시간을 완벽하게 보낸 아름다운 페이지 전환 애니메이션을 잃을 수 있습니다. 운 좋게도이 라이브러리를 사용하면 해당 사례를 쉽게 처리 할 수 있습니다.
정적 속성 pageTransitionDelayEnter = true 추가하면 모든 것이로드가 완료되었음을 나타내는 데 사용할 수있는 특수 콜백 소품이 전달됩니다. 그 동안 페이지가 장착되지만 엔터리 전환은 아직 시작되지 않으며 선택의 로딩 표시기가 그 자리에 표시됩니다. 콜백 소품을 호출하면 로딩 스피너가 숨겨지고 페이지가 제자리에 들어갑니다! 기본적으로 콜백은 pageTransitionReadyToEnter Prop을 통해 전달되지만 PageTransition 구성 요소에서 loadingCallbackName Prop를 설정하여 지정할 수 있습니다.
참고 : 구성 요소가 컨텐츠로드를 완료하고 애니메이션 할 준비가 될 때까지 render() 함수에서 null 반환해야합니다.로드하는 동안 페이지가 여전히 React 구성 요소 트리에 있습니다!
"하지만 내 네트워크 요청은 일반적으로 빠릅니다!"라고 말할 것입니다. "그들은 보통 수백 밀리 초 밖에 걸리지 않으며, 짧은 시간 동안 화면에서 로딩 표시기를 플래시하고 싶지 않습니다!" 이 라이브러리는 해당 사례도 처리 할 수 있습니다. loadingDelay 소품을 지정하면 많은 시간이 경과 할 때까지 로딩 표시기가 표시되지 않습니다. 그 전에 구성 요소를 입력 할 준비가되면 로딩 표시기는 절대 표시되지 않아 UX를 깨끗하고 으스러운 상태로 유지합니다. 그러나 구성 요소에 오랜 시간이 걸리면 구성 요소가 준비 될 때까지 로딩 표시기가 표시됩니다.
"그것은 반응 서스펜스 대화의 자리 표시 자 개념과 비슷하게 들린다.이 YouTube 비디오에서." 예, 그렇습니다! 그것은이 기능에 대한 영감이었습니다.
다음은 타임 아웃으로 네트워크 요청을 시뮬레이션하는 예제 구성 요소입니다.
class About extends React . Component {
static pageTransitionDelayEnter = true
constructor ( props ) {
super ( props )
this . state = { loaded : false }
}
componentDidMount ( ) {
this . timeoutId = setTimeout ( ( ) => {
this . props . pageTransitionReadyToEnter ( )
this . setState ( { loaded : true } )
} , 2000 )
}
componentWillUnmount ( ) {
if ( this . timeoutId ) clearTimeout ( this . timeoutId )
}
render ( ) {
if ( ! this . state . loaded ) return null
return < div > Hello, world! </ div >
}
} 좋은 회전 하중 표시기를 렌더링하는 Loader 구성 요소가 있다고 가정하십시오. 이 구성 요소를 사용하려는 PageTransition 구성 요소에 네트워크 표시기를 표시 할 때까지 기다릴 시간을 알려야합니다.
<PageTransition
timeout={300}
classNames="page-transition"
loadingComponent={<Loader />}
loadingDelay={500}
loadingTimeout={{
enter: 400,
exit: 0,
}}
loadingClassNames="loading-indicator"
>
<Component {...pageProps} key={router.route} />
</PageTransition>
로딩 표시기를 화면 켜기/끄기를 원하는 경우 스타일을 추가해야합니다. 애니메이션없이 나타나거나 사라지려면 loadingTimeout={0} 추가하고 loadingClassNames 속성을 생략 할 수 있습니다.
이 모습에 대한 전체 예제는 examples 디렉토리의 delayed-enter 앱을 확인하십시오. "About"Page ( pages/about.js )는 컨텐츠를 표시하기 전에 2 초를 기다리며 그 동안 components/Loader.js 의 구성 요소가 표시됩니다. 이 구성 요소가 어떻게 작동하는지에 대한 더 깊은 감각을 얻기 위해 다양한 지연으로 놀아보십시오.
PageTransition PropsclassNames : 페이지 전환 애니메이션을 구동하기 위해 페이지 래퍼에 적용될 클래스 이름을 지정합니다. react-transition-group 의 CSSTranstition 구성 요소의 classNames 소품과 유사합니다. 그러나 해당 소품의 문자열 형태 만 현재 지원됩니다. 또한이 라이브러리에는 별도의 "나타나는"상태가 없습니다. "Enter"및 "Exit"클래스 만 필요합니다.tag : 페이지 래퍼를 렌더링하는 데 사용될 태그 또는 구성 요소를 지정합니다. 이 요소는 classNames 소품을받습니다. 시맨틱 마크 업을 사용하려는 경우, 예를 들어 페이지 래퍼를 main 으로 렌더링하려고하거나 페이지 래퍼의 스타일링 또는 동작을 추가로 사용자 정의 해야하는 경우 유용합니다.timeout : 페이지 전환 애니메이션의 시간 초과를 지정합니다. react-transition-group 의 CSSTranstition 구성 요소의 timeout 소품과 유사합니다.loadingComponent : 표시되는 반응 요소loadingDelay : 로딩 표시기를 밀리 초로 표시하기 전에 대기 시간. 이 기간이 경과하기 전에 페이지가로드가 완료되면 로딩 구성 요소는 표시되지 않습니다. 기본값은 500ms입니다.loadingCallbackName :로드가 완료 될 때 페이지가 호출 할 수있는 소품의 이름을 지정합니다. 기본값은 pageTransitionReadyToEnter 로 나타납니다loadingTimeout : react-transition-group 의 CSSTranstition 구성 요소의 timeout 소품과 유사합니다. 이 소품이 0 으로 설정되면 로딩 표시기가 화면에서 켜지거나 끄지 않습니다.loadingClassNames : 지정된 경우 로딩 구성 요소에 적용될 클래스 이름을 지정합니다. react-transition-group 의 CSSTranstition 구성 요소의 classNames 소품과 유사합니다.monkeyPatchScrolling : 기본적으로 다음 Link 구성 요소가 클릭 할 때마다 페이지 상단으로 스크롤됩니다. 페이지가 전환 될 때 바람직하지 않은 점프 효과가있을 수 있습니다. 구성 요소가 장착 될 때이 소품이 true 로 설정되면 window.scrollTo 는 원숭이를 삽입하여 페이지가 전환되는 동안 프로그래밍 방식의 스크롤을 비활성화 할 수 있도록합니다. 이 잠재적으로 스케치 행동은 옵트 인이어야하기 때문에 기본값은 거짓으로 거짓입니다.skipInitialTransition : 첫 번째 마운트에서 페이지 전환이 생략되는지 지정합니다. 첫 페이지로드가 아닌 페이지간에 만 전환하려면 skipInitialTransition true 로 설정하십시오. 기본적으로 skipInitialTransition 이 false 로 설정됩니다.PR은 환영합니다! 작업을 수행하고 PR을 제출하기 전에 빌드 할 기능을 설명하는 문제를 해결하십시오. 이 프로젝트의 범위를 벗어나거나 관리자가 이미 작업 중일 수도 있습니다.
