Анимация перехода на другую страницу React?

Question

[uzi_no_uzi]

Пытаюсь сделать анимацию перехода на другую страницу следующим образом: Для начала я обернул в HashRouter мой контейнер, который меняется при смене адреса.Далее я создал компонент второй страницы, для которой прописал два класса со стилями, первый основной. в которой все дефолтные свойства + скрытие за пределы body, т.е. transform: translateX(100%); и transition 0.4s;, а второму классу, который добавляется при изменении состояния компонента дал transform: translateX(0);. В итоге анимация не работает, хотя я использую componentDidMoutn(), т.е. после того как компонент уже отрендерился я меняю его состояние. Новая страница появляется моментально, а не плавно выплывает.

Код самой страницы, которая должна появится:

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);
}

Код страницы на которой происходит навигация:

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

[Алексей Николаев]

Если вкратце, то вы не сможете это сделать таким образом. Вам нужен HOC, который будет сдерживать демонтированный компонент на то время, что к нему применяется анимация. Смотрите в сторону CSSTransitionGroup, делал анимацию перехода с помощью этой библиотеки.

Answer 2

[Kolejium]

Костыль но будет работать. Вы рендерите, уже готовы компонент. Можно при нажатии на кнопку сделать таймер и inline стиль задавать TranslateX(i) где i++.
Еще вот такой вариант: https://www.npmjs.com/package/react-animated-css
Еще https://css-tricks.com/building-a-complex-ui-anima...
Ну вот на русском: https://jetruby.com/ru/blog/css-reactjs-animation/