React Router v4 Анимированный пример перехода

Question

Пример перехода анимации provided in the v4 docs кажется немного запутанным для меня, так как он отображает затухание одного и того же компонента и корректировку цвета фона.

Я пытаюсь применить эту технику к более реальному примеру выцветания одного компонента и другого, но я не могу заставить его работать должным образом (кажется, что он только исчезает из первого, тогда второй выскакивает в, и этот переход работает только один путь (обратно кнопки приводит не в переходе)

Вот мой код, который использует усеченную версию 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; 

I что этот вопрос является почти дубликатом this one, однако у него есть принятый ответ, который фактически не Ответ на вопрос.

Answer 1

v4 docs переехал в react-transition-group, поэтому вы можете рассмотреть возможность сделать то же самое.

Что касается «затухания одного и того же компонента и выхода», это не тот же экземпляр компонента. Два экземпляра существуют одновременно и могут обеспечить перекрестное затухание. react-motion docs говорит: «TransitionMotion сохранил c вокруг», и я думаю, react-transition-group - это то же самое.