阵营路由器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：动画过渡跳下

回答

相关问题