Как сгладить горизонтальный переход коллапса с React-Bootstrap? ⇐ CSS

[Anonymous]

edit : codesandbox ссылка: https://codesandbox.io/s/strange-dawn-q9zow

Я создаю A React App, что я хочу иметь складную боковую панель. Я использую утилиту перехода с перехода от React-Bootstrap. Поскольку это для боковой панели, я использую dimension = "width" . Я попытался добавить переход к нескольким элементам, включая класс witidth , как говорится в документации React-Bootstrap, но анимация все еще действительно таплюбленна/не гладкая. Я упускаю урок, или есть что -то дополнительное, что мне нужно сделать с CSS? < /p>

jsx: < /p>

import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Collapse from 'react-bootstrap/Collapse';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation
} from "react-router-dom";
import '../../custom_styles/sidebar.css';

function Visualizer() {
const [open, setOpen] = useState(false);
return (





Palette



setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
Toggle Sidebar





)
}

export default Visualizer;
< /code>

css: < /p>

#sidebar {
transition: width 2s;
}

.width {
transition: width 2s;
}

.show {
transition: width 2s;
}


Подробнее здесь: https://stackoverflow.com/questions/604 ... -bootstrap