React에서 트랜지션 애니메이션을 어떻게 구현합니까?

Question

여러 개의 콘텐츠 페이지를 표시하는 React 구성 요소가 있습니다. 응용 프로그램의 다른 곳에서 단추를 클릭하면 주어진 전환을 사용하여이 구성 요소가 표시 할 항목을 변경해야합니다. 이 전환은 맞춤 자바 스크립트 전환이며 CSS가 아니기 때문에 ReactCSSTransitionGroup을 사용할 수 없습니다.

내가 생각할 수있는 두 가지 접근 방법이 있습니다. 두 가지 방법 모두 보조 수단으로 transition을 전달하지만 다음 페이지가 구성 요소로 전달되는 방법은 다릅니다.

옵션은

이 옵션은 애니메이션 것을 나타 내기 위해 transition 소품의 존재를 사용합니다. 그것은 내부에 을 유지하여 state이므로 전환이 완료 될 때까지 렌더링 할 수 있습니다. 구성 요소가 완료되면 상위 구성 요소가 전 환 소품을 제거하도록하는 조치를 전달합니다.

각 단계는 부모 구성 요소에 의한 Pager 구성 요소의 또 다른 렌더링입니다.

// 1 
<Pager currentPage={page1} /> 
// 2 
<Pager currentPage={page2} transition={transition} /> 
// 3 
<Pager currentPage={page2} /> 

옵션 B이 옵션은 모두 transition과 nextPage 명시 적으로 전달

. 다시 컴포지션은 전환이 완료되면 액션을 전달합니다.

// 1 
<Pager currentPage={page1} /> 
// 2 
<Pager currentPage={page1} nextPage={page2} transition={transition} /> 
// 3 
<Pager currentPage={page2} /> 

이 중 어느 것이 더 좋을지 또는 완전히 다른 접근 방식이없는 것인지 확실하지 않습니다.

Answer 1

옵션 C

페이지에서 전환을 실행하는 방법을 알고 있어야하며 전환이 완료되면 부모에게 알립니다. 이

// Not pages.. page 
<Page 
    transition={{...}} 
    component={Login} 
    onTransitionEnd={...} 
/> 

같은 매우 간단한 API를 얻을 수 있습니다이 방법은 그래서 당신은 당신은 페이지의 주위에 <Pager /> 같은 래퍼를 구축 할 수 페이지 2

을 페이지 1을 열고 닫는 것처럼, 동시에 두 전환을 실행할 수 있습니다 다음 번 전환을 위해 내부에서 계산을 수행합니다.

<Pager initIndex={0} pages={[....]}> 

그러나 <Page /> 자체가 알아야 할 방법 이동