陣營路由器V4：動畫過渡跳下

我嘗試設置淡入使用RR4和ReactCSSTransitionGroup基於例如路由組件之間的淡出過渡從https://reacttraining.com/react-router/web/example/animated-transitions 陣營路由器V4：動畫過渡跳下

動畫工作，但前一個組件跳下來之前，下一個是渲染。

我在做什麼錯的，是有多個部件之間（不使用參數化的路徑，使用反應運動，而不是CSSTransitionGroup）過渡更簡單的方法？

截屏：

https://media.giphy.com/media/l4FGnVfAgiX4Hzns4/giphy.gif

代碼：

AnimatedTrans.js

import React from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import {MemoryRouter as Router, Redirect, Route, Link} from 'react-router-dom' 

import s from './AnimatedTrans.css'; 

const DisplayParam = ({match: {params}}) => (
    <div>param is: {params.pname} count is {params.count}</div> 
); 


const AnimatedTrans =() => (
    <Router> 
     <Route render={({location}) => (
      <div> 
       <Route exact path="/" 
         render={() => (<Redirect to='/home/0' />)} /> 
       <ul> 
        <li><Link to="/home/1">Home</Link></li> 
        <li><Link to="/about/2">About</Link></li> 
        <li><Link to="/contact/3">Contact</Link></li> 
       </ul> 
       <div className={s.el}> 
        <ReactCSSTransitionGroup 
         transitionEnterTimeout={500} 
         transitionLeaveTimeout={200} 
         transitionName={{ 
          enter: s.enter, 
          enterActive: s.eactive, 
          leave: s.leave, 
          leaveActive: s.lactive, 
         }}> 
         <Route location={location} 
           key={location.key} 
           path="/:pname/:count" 
           component={DisplayParam} 
         /> 
        </ReactCSSTransitionGroup> 
       </div> 
      </div> 
     )} /> 
    </Router> 
); 

export default AnimatedTrans;

AnimatedTrans.css。

.el { 
    position: absolute; 
} 

.enter { 
    opacity: 0.01; 
    transition: opacity 0.3s ease-in 0.2s; 
} 
.eactive { 
    opacity: 1; 
} 

.leave { 
    opacity: 1; 
    transition: opacity 0.2s ease-in; 
} 

.lactive { 
    opacity: 0.01; 
}

來源

2017-04-25 unkind

我一直試圖做同樣的事情，但我還沒有成功，由於我缺乏瞭解反應。你有一個相同的代碼路由組件轉換的小例子。我已經重新創建你的榜樣[路由器轉換（http://codepen.io/w9914420/pen/YVZEmp?editors=0110）還我注意到，如果你雙擊了按鈕，回放相同的過渡理想情況下你不希望這樣做發生。 – W9914420

我有，你給absolute CSS屬性錯誤的DIV的感覺。的相反，它給人以<ReactCSSTransitionGroup/>父DIV，儘量把它給孩子們（和放在父位置relative）。

來源

2017-04-25 18:42:44 MadeInMoon

我可以證實，這個作品看到我的筆：[PARAMS過渡（http://codepen.io/w9914420/pen/YVZEmp?editors=0110） – W9914420

陣營路由器V4：動畫過渡跳下

回答

相關問題