How to make a reverse animation when a router transitions?

Question

React

Good time!
There is a main page with a bunch of blocks, and a block page.
I want to make an animation of the block gradually dragging to the full width when clicking on the Link of the router, and adding a background display with a dark transparent block (like modal windows) when switching the router, and also do a reverse animation when we return from the block page to the main one.
Should be something like this only with the same reverse animation and background.
When looking for the right tools, I came across the problem that in react-router 4 , there is no support for callbacks, so I can’t pass the position of the element to gradually increase from the block we need.
Found an example with the implementation of react-router v2 andreact-router-page-transition which I added above, but unfortunately there is no way to somehow determine the moment when we move from the element page to the main one.
So I chose a clumsy option, simply hanging on the link of the transition router to the main page onClick handler in which I changed styles and started re-animation.
I also added to display the background on the main page of adding a class to the block outside the list via ref, when clicking on the Link of the transition to the element page.
How to make a reverse animation (reducing the object to its original size, to the same position where the block is located) when moving to the main page from the element page?
Also, since I'm using redux, I can add animation to the background element using an action when clicking on the link to the main page.
Maybe there is another, more suitable library for my task?
I also found a library with more or less suitable features and callbacks at the moment of leave route.
Item page component

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,
            }}/>
        )
    }
}