React Router Change transitionName on button click - reactjs

Question

I have added CSSTransitionsGroup to my React-Router to create page transitions. Now, I want to have different transitions, based on which link I click.
For example: I always want to use 'fade', except for when I click on the 'Work' button, then I want to use 'slideLeft'.
I am using React-Router 4, and the normal React Animation Add-Ons from https://facebook.github.io/react/docs/animation.html.
My App component with my Router and Transitions look like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' // ES6
import { ConnectedRouter } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
import Home from '../containers/Home';
import Work from '../containers/Work';
import BTS from '../containers/BTS';
import SinglePage from '../containers/SinglePage';
import NotFound from '../containers/NotFound';
import store from '../store';
export default class App extends Component {
render() {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Route render={({ location }) => (
<CSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
<Switch key={location.key} location={location}>
<Route exact path="/" component={Home}/>
<Route exact path="/work" component={Work}/>
<Route exact path="/behind-the-scenes" component={BTS}/>
<Route path="/about" component={SinglePage}/>
<Route component={NotFound}/>
</Switch>
</CSSTransitionGroup>
)}/>
</ConnectedRouter>
</Provider>
);
}
}
And my Home component just have 3 simple buttons:
import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
export default class Home extends Component{
render() {
return(
<div className="home page">
<main>
<ul>
<li><Link to="/work">Work</Link></li>
<li><Link to="/behind-the-scenes">behind the scenes</Link></li>
<li><Link to="/3eBtn">3e Btn</Link></li>
</ul>
</main>
</div>
)
}
}
So It always uses Fade, because I called transitionName="fade", but I want to call 'SlideLeft' when I click the '/work' Link.

Answer 1

Try this:
Put the Condition on value of transitionName, when the location will be work then assign the SlideLeft otherwise fade.
<CSSTransitionGroup
transitionName={location.pathName == "work" ? "SlideLeft" : "fade"}