使用react-transition-group 来做路由动画。放在单个组件中可以使用。但是在路由中没有效果。请教一下是怎么解决?
import React from 'react';
import {Link} from 'react-router';
import {CSSTransitionGroup} from 'react-transition-group' ;
import './main.css'
let styles = {
leftNav: {
width: '170px',
position: 'fixed',
top: '56px',
height: '100%',
background: 'lightblue'
},
content: {
background: '#fff',
position: 'absolute',
top: '56px',
left: '200px',
width: '70%',
height: '90%',
},
menu: {
display: 'block',
overflow: 'hidden'
},
list: {
fontSize: "20px",
listStyle: "none",
},
reset: {
textDecoration: "none"
}
}
let leftNav = () => {
return (
<nav>
<ul>
<li style={styles.list}><Link activeStyle={{color: 'red'}} style={styles.reset} to="/com1">one</Link></li>
<li style={styles.list}><Link activeStyle={{color: 'red'}} style={styles.reset} to="/com2">two</Link></li>
<li style={styles.list}><Link activeStyle={{color: 'red'}} style={styles.reset} to="/com3">three</Link></li>
<li style={styles.list}><Link activeStyle={{color: 'red'}} style={styles.reset} to="/todo">todo</Link></li>
</ul>
</nav>
)
}
class App extends React.Component {
render() {
return (
<div>
<div className="leftNav" style={styles.leftNav}>
{leftNav()}
</div>
<div className="content" style={styles.content}>
<CSSTransitionGroup
transitionName="a"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
<div style={{position:"relative",width:"100%"}}>
{this.props.children}
</div>
</CSSTransitionGroup>
</div>
</div>
);
}
}
export default App;
css
.a-enter {
opacity: 0.01;
color:yellow;
}
.a-enter.a-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
color: red;
}
.a-leave {
opacity: 1;
}
.a-leave.a-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
版本
“react”: “^15.6.1”,
“react-dom”: “^15.6.1”,
“react-router”: “^3.0.5”,
“react-transition-group”: “^1.2.0”,
CSSTransitionGroup 是放在父组件里呢还是应写在react-router 的config中?