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으로 이동 했으므로 동일한 것으로 고려할 수 있습니다.

"동일한 구성 요소를 안팎으로 페이드 (fading)하는 것과 관련하여"실제로 구성 요소의 동일한 인스턴스가 아닙니다. 두 인스턴스가 동시에 존재하고 크로스 페이드를 제공 할 수 있습니다. react-motion docs은 "TransitionMotion가 주위에 c을 유지했습니다"라고 말하면 나는 react-transition-group이 같은 것이라고 상상합니다.