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，尝试将其提供给子项（并将父项位置设为relative）。

React Router v4：动画过渡向下跳转

1 个答案: