React Router v4：动画过渡向下跳

Question

我尝试根据https://reacttraining.com/react-router/web/example/animated-transitions 中的示例使用 RR4 和 ReactCSSTransitionGroup 在路由组件之间设置淡入淡出过渡

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

我做错了什么，有没有更简单的方法在多个组件之间进行转换（不使用参数化路径，使用 react-motion 而不是 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;
}

Answer 1

我感觉您将 absolute css 属性赋予了错误的 div。 不要将其提供给 <ReactCSSTransitionGroup/> 父 div，而是尝试将其提供给子 div（并将父位置设置为 relative）。