Reactjs React Router v4：动画过渡跳下

我尝试使用RR4和ReactCSStransitongGroup（基于中的示例）在路由组件之间设置淡入淡出转换

动画可以工作，但在渲染下一个组件之前，上一个组件会跳下

我做错了什么？是否有更简单的方法在多个组件之间进行转换（不使用参数化路径，使用react motion而不是CSSTransitionGroup）

放映：

代码：

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;

---

我感觉您将

absolute

css属性赋予了错误的div。

---

不要将它交给

父div，而是尝试将它交给子div（并将父位置设置为

相对的
）。
我感觉您将
绝对的
css属性交给了错误的div。
不要把它交给
家长部门，试着把它交给孩子们（并把家长的位置设置为
相对的
）。
我可以确认这是有效的看我的笔：我可以确认这是有效的看我的笔：我一直在尝试做类似的事情，但由于缺乏理解，我没有取得任何成功。您是否有一个使用相同代码的布线组件转换的小示例。我重新创建了您的示例。我还注意到，如果您双击按钮，您将重播相同的转换，理想情况下，您不希望发生这种情况。我一直在尝试做类似的事情，但由于缺乏理解，我没有取得任何成功。您是否有一个使用相同代码的布线组件转换的小示例。我已经重新创建了您的示例。我还注意到，如果双击按钮，您将重播相同的转换，理想情况下，您不希望发生这种情况。
.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;
}