使用react-transition-group 来做react-router的动画，遇到的问题是，从router2 跳转到router1 ，应该是 router2 执行离开动画，router1 执行进入动画，但是现在 是 router1 同时执行离开和进入的动画，不知道怎么回事。
<BrowserRouter>
<Route render={({location}) => (
<div style={{position:'absolute',left:'400px'}}>
<div>
{leftNav()}
</div>
<div>
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={500}
transitionEnterTimeout={2000}
transitionLeaveTimeout={1000}
>
<div key={location.pathname} style={{position:'absolute',width:'200px',background:'lightblue',height:'100px'}}>
<Route exact path="/" component={Com1}/>
<Route exact path="/com1" component={Com1}/>
<Route exact path="/com2" component={Com2}/>
<Route exact path="/com3" component={Com3}/>
</div>
</CSSTransitionGroup>
</div>
</div>
)}/>
</BrowserRouter>
.example-enter {
opacity: 0;
transform: translateX(100%);
}
.example-enter.example-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 2s ease-in;
}
.example-leave {
opacity: 1;
transform: translateX(0);
}
.example-leave.example-leave-active {
opacity: 0;
transform: translateX(-100%);
transition: all 1s ease-out;
}