リアクタールータv4アニメーショントランジションの例

Question

アニメーションのトランジションの例provided in the v4 docsは、同じコンポーネントを出し入れして背景の色を調整するため、少し畳み込まれているようです。

私はこのテクニックを、実際には1つのコンポーネントをフェードアウトさせ、もう1つをフェードアウトさせる例に適用しようとしていますが、正しく動作させることはできません（最初のフェードアウトもう一つはでポップ、そしてこの移行は、一方向のみ（無移行戻るボタンの結果を）作品

ここでは例からMatchWithFadeのストリップダウンバージョンを使用しています私のコード、です：。

import React from 'react'; 
import { TransitionMotion, spring } from 'react-motion' 
import { HashRouter, Match, Miss } from 'react-router'; 
import Home from './components/Home'; 
import Player from './components/Player'; 
import FormConfirmation from './components/FormConfirmation'; 

const App =() => (
    <HashRouter> 
    <div className="App"> 
     <MatchWithFade exactly pattern="/" component={Home} /> 

     <MatchWithFade pattern="/player/:playerId" component={Player} /> 

     <MatchWithFade pattern="/entered" component={FormConfirmation} /> 

     <Miss render={(props) => (
     <Home players={Players} prizes={Prizes} {...props} /> 
    )} /> 
    </div> 
    </HashRouter> 
); 

const MatchWithFade = ({ component:Component, ...rest }) => { 
    const willLeave =() => ({ zIndex: 1, opacity: spring(0) }) 

    return (
    <Match {...rest} children={({ matched, ...props }) => (
     <TransitionMotion 
     willLeave={willLeave} 
     styles={matched ? [ { 
      key: props.location.pathname, 
      style: { opacity: spring(1) }, 
      data: props 
     } ] : []} 
     > 
     {interpolatedStyles => (
      <div> 
      {interpolatedStyles.map(config => (
       <div 
       key={config.key} 
       style={{...config.style}} 
       > 
       <Component {...config.data}/> 
       </div> 
      ))} 
      </div> 
     )} 
     </TransitionMotion> 
    )}/> 
) 
} 

export default App; 

私はこの質問はほぼthis oneと重複していることに気づいていますが、実際には解決されていない回答があります 質問に答えて。

Answer 1

v4 docsはreact-transition-groupに移動しましたので、同じことを検討することをお勧めします。

「同じコンポーネントを出し入れする」という点に関しては、実際にはコンポーネントの同じインスタンスではありません。 2つのインスタンスが同時に存在し、クロスフェードを提供することができます。 react-motion docsは、「TransitionMotionはcを維持しています」と言います。私はreact-transition-groupが同じであると想像しています。