Tuve la dicha de ver el Curso a fondo de CSS y me fijé que hacía falta en el archivo App.css la propiedad transition que no la definimos y es muy importante para las animaciones. Antes de explicarles esto, les diré que estas son las versiones de mi package.json que usé para el curso:
"dependencies": {
"material-ui": "^0.20.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-router-dom": "^5.2.0",
"react-scripts": "2.1.8",
"react-transition-group": "^2.6.1"
}
Y aclaro esto porque los props que usa el componente CSSTransition son diferentes hoy en día (y quizás en nuevas versiones tiene otros cambios). Por lo tanto, me quedó de la siguiente forma:
<CSSTransition
unmountOnExit={true}
timeout={{enter: 500, exit: 500}}
classNames="left-out"
key={this.props.location.pathname.split('/')[1]}
in={this.props.in}
>
{this.props.children}
</CSSTransition>
Por último y para que todo funcione, las clases left-out deben ser de la siguiente forma:
.left-out-enter {
opacity: 0;
transform: translateX(100%);
}
.left-out-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.left-out-exit {
opacity: 1;
transform: translateX(100%);
}
.left-out-exit-active {
opacity: 0;
transform: translateX(0);
transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
Espero que sea de ayuda esto que les indico 😊