edit : codeSandbox ссылка: https://codesandbox.io/s/strange-dawn-q9zow
Я создаю приложение React, которое я хочу иметь складываемой боковой панель. Я использую утилиту перехода с перехода от 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
