Как сделать обратную анимацию при переходе router-а?

Question

[Fierfoxik]

Доброго времени!

Есть главная страница с кучей блоков, и страница блока.
Хочу сделать анимацию постепенного увлечения блока на всю ширину, при нажатии на Link роутера, и добавления отображения подложки с темным прозрачным блоком (как у модальных окон) при переключении роутера, и так же сделать обратную анимацию когда возвращаемся со страницы блока на главную.
Должно быть что-то вроде этого только с такой же обратной анимацией и подложкой.

При поиске нужных инструментов наткнулся на проблему что в react-router 4, нет поддержки callbacks, тем самым мне не передать позицию элемента для постепенного увеличения от нужного нам блока.

Нашел пример с реализацией react-router v2 и react-router-page-transition который я добавил выше, но к сожалению там нет возможности как то определить момент когда мы переходим со страницы элемента на главную.
Так что я выбрал топорный вариант, просто навешивая на link роутера перехода на главную страницу onClick обработчик в котором менял стили и запускал повторную анимацию.
Так же добавил для отображения подложки на главной странице добавления класса к блоку вне списка через ref, при нажатии на Link перехода на страницу элемента.

Как сделать обратную анимацию (уменьшения объекта до его исходного размера, в ту же позицию где находится блок) при переходе на главную со страницы элемента?
Так же т.к я использую redux можно добавлять анимацию для элемента подложки, используя экшен при клике на ссылку на главную страницу.
Может есть другая, более подходящая библиотека для моей задачи?

Нашел еще библиотеку с более менее подходящими возможностями и каллбэками на моменте leave route.

Компонент страницы элемента

class TileItem extends Component{
    constructor(props){
        super(props);

        this.state = {
            doTransform: false,
            position: null,
        };
    }


    onTransitionWillStart(data) {
        // Start position of the page
        this.setState({
            doTransform: true,
            position: data,
        });

    }

    onTransitionDidEnd() {
        // Transition is done, do your stuff here
    }

    transitionManuallyStart() {
        // When this method exsits, `transition-appear-active` will not be added to the dom
        // we will define our animation manually.
        this.setState({
            position: {
                top: 0,
                height: '100%',
                width: '100%',
                left: 0,
                right: 0,
            },
            doTransform: true,
        });
    }

    transitionManuallyStop() {
        // When this method exsits, `transition-appear-active` will not be removed
        this.setState({
            doTransform: false,
        });
    }

    test = () => {
        this.setState({
            position: {
                top: this.props.TileItem.style.top,
                height: this.props.TileItem.style.height,
                width: this.props.TileItem.style.width,
                left: this.props.TileItem.style.left,
                right: this.props.TileItem.style.right,
            },
            doTransform: true,
        });
    };

    get elementIndex(){
        return  this.props.location.state.index ? this.props.location.state.index : this.props.TileItem.index;
    }

    render(){
        return(
            <Link
                to={'/'}
                className="transition-item single-tile"
                onClick={this.test}
                style={{
                backgroundColor: this.props.Tiles[this.elementIndex].backgroundColor,
                transform: this.state.doTransform ?
                    `translate3d(0, ${this.state.position.top}px, 0)` :
                    undefined,
                height: this.state.doTransform ?
                    this.state.position.height : null,
                width: this.state.doTransform ?
                    this.state.position.width : null,
                left: this.state.doTransform ?
                    this.state.position.left : null,
                right: this.state.doTransform ?
                    this.state.position.left : null,
            }}/>
        )
    }
}