alaskafx
@alaskafx
Не .do Frontend

Как сделать плавный переход высоты при навигации React?

У меня есть такой роутинг:

<Route path="Lowling" element={<Lowling/>}>
                    <Route path="index" element={<Index/>}></Route>
                    <Route path="login" element={<Login/>}></Route>
                    <Route path="bye" element={<Bye/>}></Route>
                </Route>


Компонент Lowling - нечто вроде главной плашки, внутри которой должен быть контент:
<div className="lowling">
            <div className="foo-panel">
                    <Outlet />
            </div>
        </div>


А компоненты внутри — это контент данной плашки.
Получается так, что при переходе эта плашка должна плавно менять свою высоту при роутинге, но у меня это выходит резко (transition на высоту присутствует) :
const [clientHeight, setClientHeight] = useState(null);

const style = {
    height: clientHeight ? `${clientHeight}px` : 'auto'
};

return (
    <div className="lowling" style={style} ref={(ref) => setClientHeight(ref?.clientHeight ?? null)}>
      <div className="foo-panel">
                <Outlet/>
            </div>
    </div>
);


Как решить и почему так происходит?
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 1
rqdkmndh
@rqdkmndh
Web-разработчик
Transition действует на элементы, которые постоянно находятся в dom-дереве. У вас же происходит перерендер компонента каждый раз. Привязывание к нему ref-а не поможет.
Советую использовать библиотеку для анимации React Transition Group
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы