使用ReactCSSTransitionGroup做路由切换动效遇到了问题,求解答!谢谢!

#1

动画淡入淡出效果始终出不来,不知道哪里出了问题

代码如下:

JS部分:

import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect
  } from 'react-router-dom'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './css/transition.css';   
const oStyle = {
    container: {
        "display": "flex",
        "flexDirection": "column"
    },
    bgColor1: {
        "background": "#FFEBEE",
        "height": "500px"
    },
    bgColor2: {
        "background": "#FFF3E0",
        "height": "500px"
    },
    bgColor3: {
        "background": "#E3F2FD",
        "height": "500px"
    }
};
const AnimationExample = () => (
    <Router>
        <div style = { oStyle.container }>
            <div>
                <Link to = "/"> HomePage </Link>
                <Link to = "/comp1"> FirstPage </Link>
                <Link to = "/comp2"> SecondPage </Link>
            </div>
            <ReactCSSTransitionGroup 
                transitionName="fade" 
                transitionEnterTimeout={300} 
                transitionLeaveTimeout={300}
             >
                <Route exact path = "/" component = { HomePage } key={ 0 }></Route>
                <Route path = "/comp1" component = { FirstPage } key={ 1 }></Route>
                <Route path = "/comp2" component = { SecondPage } key={ 2 }></Route>
            </ReactCSSTransitionGroup>
        </div>
    </Router>
);
const HomePage = () => (
    <div style = { oStyle.bgColor1 }>
        HomePage
    </div>
);
const FirstPage = () => (
    <div style = { oStyle.bgColor2 }>
        FirstPage
    </div>
);
const SecondPage = () => (
    <div style = { oStyle.bgColor3 }>
        SecondPage
    </div>
);
ReactDOM.render(<AnimationExample />,document.getElementById('root'));

CSS部分:

.fade-enter {
    opacity: 0;
    z-index: 1;
}
.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 250ms ease-in;
}