动画淡入淡出效果始终出不来,不知道哪里出了问题
代码如下:
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;
}