ReactCSSTransitionGroup leave animation not applying to Route - css

Question

Entering animations are applied correctly. Component seems to unmount prior to applying any leave, leave-active classes.
componentWillMount() {
this.setState({
routes: [(<Route exact path='/' component={HomeView}/>),
(<Route exact path='/account' component={YourAccountView}/>),
(<Route exact path='/settings' component={SettingsView}/>),
(<Route exact path='/about' component={AboutView}/>),
(<Route exact path='/machine/:_id' component={MachineDetailView}/>),
(<Route exact path='/floorview' component={FloorView}/>)]
})
}
render() {
return (
<div>
<NavBar/>
<div style={{position: 'relative', flexGrow: 1 , marginTop:40+'px'}}>
<ReactCSSTransitionGroup
transitionName="pageSlider"
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{this.state.routes
.filter((e)=> e.props.path===this.context.router.history.location.pathname )
.map((e)=> React.cloneElement(e, { key: this.context.router.history.location.pathname} ))}
</ReactCSSTransitionGroup>
</div>
</div>
);
}
I can't tell if this is a ReactCSSTransitionGroup thing, or a React-Router v4 mounting/unmounting thing. Has anyone run into and solved similar issue?

Answer 1

this case works:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<BrowserRouter>
<Route path="/" component={App}/>
</BrowserRouter>
,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './App.css';
const One = ({match}) => (
<h2>{match.url}</h2>
)
const Two = ({match}) => (
<h2>{match.url}</h2>
)
const Three = ({match}) => (
<h2>{match.url}</h2>
)
const Four = ({match}) => (
<h2>{match.url}</h2>
)
const MyNav = () => (
<div>
<Link to='/One'>One</Link>
<Link to='/Two'>Two</Link>
<Link to='/Three'>Three</Link>
<Link to='/Four'>Four</Link>
</div>
)
class App extends Component {
componentWillMount() {
this.setState({routeKey:this.props.location.pathname})
this.setState({routes: [
(<Route exact path="/One" component={One}/>),
(<Route exact path="/Two" component={Two}/>),
(<Route exact path="/Three" component={Three}/>),
(<Route exact path="/Four" component={Four}/>)
]})
}
render() {
return (
<div className="App">
<div>
<MyNav/>
<ReactCSSTransitionGroup
transitionName="PageSlider"
transitionEnterTimeout={0}
transitionLeaveTimeout={150}>
<Switch key={this.props.location.pathname}>
<Route exact path="/One" component={One}/>
<Route exact path="/Two" component={Two}/>
<Route exact path="/Three" component={Three}/>
<Route exact path="/Four" component={Four}/>
</Switch>
</ReactCSSTransitionGroup>
</div>
</div>
);
}
componentWillReceiveProps(newProps) {
this.setState({routeKey:newProps.location.pathname})
}
}
export default App;
specify .PageSlider-enter, .PageSlider-enter.PageSlider-enter-active, .PageSlider-leave, .PageSlider-leave.PageSlider-leave-active accordingly