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

[Anonymous]

Изменить: ссылка CodeSandbox: https://codesandbox.io/s/strange-dawn-q9zow

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

JSX:

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;


CSS:

#sidebar {
transition: width 2s;
}

.width {
transition: width 2s;
}

.show {
transition: width 2s;
}


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