Przykład transformacji Router v4 Animowany przykład

Question

Przykład przejścia do animacji provided in the v4 docs wydaje mi się nieco zawikłany, ponieważ przedstawia zanikanie tego samego komponentu i wyjścia oraz dostosowanie koloru tła.

Próbuję zastosować tę technikę do bardziej realnego przykładu zaniku jednego komponentu i drugiego, ale nie mogę go zmusić do poprawnego działania (wydaje się, że najpierw zanika pierwszy, drugi pojawia się, a przejście to działa tylko w jedną stronę (powrót przycisku powoduje brak przejścia)

Oto mój kod, który wykorzystuje uproszczoną wersję MatchWithFade od np.

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 sobie sprawę, że to pytanie jest prawie duplikatem this one, jednak ma ono akceptowaną odpowiedź, która w rzeczywistości nie Odpowiedz na pytanie.

Answer 1

Przeniesiono do v4 docs do react-transition-group, więc możesz rozważyć zrobienie tego samego.

Jeśli chodzi o "zanikanie tego samego składnika na wejściu i wyjściu", to tak naprawdę nie jest to samo wystąpienie komponentu. Dwa wystąpienia istnieją jednocześnie i mogą zapewnić przenikanie. react-motion docs mówi "TransitionMotion zachował c wokół" i wyobrażam sobie, że react-transition-group jest taki sam.