React Router v4动画转换示例

Question

v4文档中提供的动画转换示例对我来说似乎有点费解,因为它描绘了淡入淡出相同的组件并调整背景颜色.

我正在尝试将这种技术应用于一个更真实的例子,将一个组件淡出另一个组件,但是我无法使其正常工作(它似乎只是淡出第一个,然后第二个弹出in,此转换只能以一种方式工作(后退按钮不会转换).

这是我的代码,它使用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;

我意识到这个问题是近一个重复这个,但是一个有一个公认的答案实际上并没有回答这个问题.

Answer 1

v4 文档已移至react-transition-group，因此您可以考虑执行相同的操作。

关于“淡入和淡出相同的组件”，它实际上并不是组件的同一个实例。两个实例同时存在并且可以提供交叉淡入淡出。 react-motion文档说“TransitionMotion一直存在c”，我想react-transition-group是一样的。