React page transition animation?

Question

Animation

I'm trying to make an animation of switching to another page as follows: First, I wrapped my container in a HashRouter, which changes when the address changes. Next, I created a component of the second page, for which I registered two classes with styles, the first is the main one. in which all default properties + hiding outside the body, i.e. transform: translateX(100%); and transition 0.4s;, and gave the second class, which is added when the state of the component changes, transform: translateX(0);. The animation doesn't work in the end even though I use componentDidMoutn() i.e. after the component has already rendered, I change its state. The new page appears instantly, and does not float smoothly.
The code of the page itself, which should appear:

import React from 'react';

import './SearchPage.css';

class SearchPage extends React.Component {

    constructor() {
        super();
        
        this.state= {
            onDisplay: false,
        }
    }

    componentDidMount() {
        this.setState({
            onDisplay: true,
        })
    }

    render() {

        let classList = '';

        if(this.state.onDisplay == false) {
            classList = 'SearchPage';
        } else {
            classList = 'SearchPage SearchPage--active';
        }

        return(
            <div className={classList}></div>
        )
    }
}

export default SearchPage;

.SearchPage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: .4s;
}

.SearchPage--active {
    transform: translateX(0);
}

The code of the page on which the navigation takes place:

import React from 'react';

import MainPage from '../MainPage';
import LeftNav from '../LeftNav';
import SearchPage from '../SearchPage';
import Menu from '../Menu';
import './App.css';

import {HashRouter, Route, Link} from 'react-router-dom';


class App extends React.Component {

    constructor() {
        super();

        this.state = {
            open: false,
        }

        this.onOpen = () => {
            this.setState({
                open: !this.state.open,
            })
        }
    }


    render() {

        let classList = '';

        if(this.state.open == true) {
            classList = 'main-wrapper main-wrapper--active';
        } else {
            classList = 'main-wrapper'
        }

        return(
            <div>
                <Menu onOpen={this.onOpen} />
                <HashRouter>
                    <main className={classList}>
                        <Route exact path='/' component={MainPage} />
                        <Route exact path='/search' component={SearchPage} />
                    </main>
                </HashRouter>
            </div>
        )
    }
}

export default App;

Answer 1

In short, you can't do it this way. You need a HOC that will hold the dismantled component while it is being animated. Look in the direction of CSSTransitionGroup, did the transition animation using this library.

Answer 2

Crutch but will work. You render, the component is already ready. You can make a timer when you click the button and set the inline style to TranslateX(i) where i++. Here 's another
option : https://www.npmjs.com/package/react-animated-css https://jetruby.com/blog/css-reactjs-animation/