Animate route change in react-router-dom switch component - animation

Question

I'm having a really hard time animating the transition from one page to another with react-router-dom. The exmaple is fine but I can't get it to work within a Switch component provided by react-router-dom.
I've tried doing this around the Switch component or inside it but it doesn't do anything (also no warnings or errors in the console).
Example
class Layout extends PureComponent {
render() {
const { account } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<CSSTransition classNames="fade" timeout={{ enter: 1500, exit: 500 }}>
<Switch key={this.props.location.key} location={this.props.location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
<Footer />
</div>
</div>
);
}
}
CSS
.fade-enter {
opacity: 0.01;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit.fade-exit-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

Answer 1

Try this:
<CSSTransition classNames="test" transitionLeaveTimeout={300}>
<Switch key={this.props.location.pathname} location={this.props.location}>
...
</Switch>
</CSSTransition>

Answer 2

try to rename classNames to transitionName.
and the css .fade-exit also should be .fade-leave if you are using these libraries: https://facebook.github.io/react/docs/animation.html or not?

Answer 3

Thanks #Melounek for the help, the issue resided in that I needed to wrap the CSSTransition in a TransitionGroup as shown in the migration docs of react-transition-group.
Example
class Layout extends PureComponent {
render() {
const { account, location } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={{ enter: 1000, exit: 1000 }}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<Switch key={location.key} location={location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer />
</div>
</div>
);
}
}

Answer 4

Try this:
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
Reference: https://github.com/ReactTraining/react-router/issues/5279#issuecomment-315652492