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

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

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

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

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

Ответы

Ответ 1

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

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