Не работает анимация при переключении компонентов, как исправить?

Question

[Umid]

import React, {Component} from 'react';
import './App.scss';

import {Router, Route} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";

import MainPage from './MainPage/MainPage';
import Header from './Header/Header';

import About from './About/About';
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

const history = createHistory();


class App extends Component {

    render() {
        return (
            <div className="App">

                <Header history={history}></Header>
                <ReactCSSTransitionGroup
                    transitionName="anim"
                    transitionEnterTimeout={300}
                    transitionLeaveTimeout={300}>
                    <Router history={history}>
                        <div>
                            <Route exact path="/" component={MainPage}/>
                            <Route path="/about" component={About}/>
                        </div>
                    </Router>
                </ReactCSSTransitionGroup>
            </div>
    );
    }
    }

    export default App;

.anim-enter {
  opacity: .1;
}
.anim-enter.anim-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}
.anim-leave {
  opacity: 1;
}
.anim-leave.anim-leave-active {
  opacity: .1;
  transition: opacity 300ms ease-in;
}

Перепробовал уже много вариаций(В том числе и внутри самого компонента), и всё безтолку, не хотят компоненты анимироваться при переходе с одного на другой.

Link'и находятся внутри компонента Header.
Роутер работает.

Answer 1

[Антон Спирин]

Deprecated же. Используйте react-transition-group