Reactでトランジションアニメーションを実装するにはどうすればよいですか？

Question

私は複数のページのコンテンツを表示するReactコンポーネントを持っています。アプリケーションの他の場所にあるボタンをクリックすると、このコンポーネントが表示する内容が変更されます。このトランジションはカスタムのJavascriptトランジションであり、CSSのトランジションではないため、ReactCSSTransitionGroupは使用できません。

私は考えることができる2つのアプローチがあります。どちらも小道具としてtransitionを渡しますが、次のページがどのようにコンポーネントに渡されるかは異なります。

オプションは

このオプションは、アニメーション化する必要があることを示すために、transition小道具の存在を使用しています。それはpage1をその内部に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 />のようなラッパーを建てことができPage2の

をPage1のを開閉するように、同時に2つの遷移を実行することができます次の移行のための計算を内部に置く。

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

しかし<Page />自体は知っている必要がありますどのように移動