React Router v4 Animierte Überblendung Beispiel

Question

Die Animation Übergang Beispiel provided in the v4 docs scheint mir etwas verworren, da es zeigt, die gleiche Komponente ein- und auszublenden und die Hintergrundfarbe einzustellen.

Ich versuche diese Technik auf ein realeres Beispiel anzuwenden, bei dem eine Komponente aus und eine andere ausgelassen wird, aber ich kann es nicht richtig funktionieren lassen (es scheint dann nur die erste auszublenden) die zweiten erscheint in, und dieser Übergang funktioniert nur in eine Richtung (Taste führt zu keinem Übergang zurück)

mein Code Hier ist, die eine abgespeckte Version von MatchWithFade aus dem Beispiel verwendet.

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 erkennen, dass diese Frage fast ein Duplikat von this one ist, jedoch, dass man eine akzeptierte Antwort hat, die nicht wirklich beantworte die Frage.

Answer 1

Die v4 docs sind zu react-transition-group umgezogen, also können Sie das gleiche tun.

In Bezug auf "die gleiche Komponente ein- und ausbleichen" ist es nicht wirklich die gleiche Instanz der Komponente. Zwei Instanzen existieren gleichzeitig und können die Überblendung bereitstellen. react-motion docs sagt "TransitionMotion hat c herumgehalten" und ich stelle mir vor react-transition-group ist das gleiche.