0

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

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

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

截屏：

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

代码：

动画Trans.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;

动画Trans.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;
}
4

1 回答 1

3

我觉得您将absolutecss 属性赋予了错误的 div。与其将其提供给<ReactCSSTransitionGroup/>父 div，不如尝试将其提供给孩子（并将父位置设为relative）。

于 2017-04-25T18:42:44.647 回答