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

Question

[alaskafx]

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

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

Как решить и почему так происходит?

Answer 1

[Антон Горецкий]

Transition действует на элементы, которые постоянно находятся в dom-дереве. У вас же происходит перерендер компонента каждый раз. Привязывание к нему ref-а не поможет.
Советую использовать библиотеку для анимации React Transition Group

Comments

[alaskafx]

Понял, спасибо.
Тогда как с помощью React Transition Group решить мою задачу? Ведь у меня происходить роутинг по контенту, относительно которого должна меняться высота родительского элемента (плашки)

[Антон Горецкий]

alaskafx, а у вас какой версии роутер - 5 или 6? На шестой версии React Transition Group уже не всё так гладко. На 6 версии лучше использовать Framer Motion. Вот видео - там не сложно, используйте высоту просто в качестве анимируемого параметра

[canClick]

Антон Горецкий, а у вас есть пример на подобии того, что просит автор? (Роутер 6 версии )