How to smooth horizontal collapse transition with React-Bootstrap? - css

Question

Edit: CodeSandbox link: https://codesandbox.io/s/strange-dawn-q9zow
I'm creating a React app that I want to have a collapsible sidebar. I'm using the transition collapse utility from React-Bootstrap. Since this is for a sidebar, I'm using dimension="width". I've tried adding a transition to a few elements including the .width class as it says in the React-Bootstrap documentation, but the animation is still really choppy/not smooth. Am I missing a class, or is there something additional I need to do with the 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 (
<Router>
<div className="container-fluid h-100 p-0">
<div className="row h-100 no-gutters">
<Collapse id="sidebar" dimension="width" in={open}>
<div className="col-4 bg-dark text-white" id="example-collapse-text">
<h2>Palette</h2>
</div>
</Collapse>
<div className="col-8">
<Button
className="float-left ml-n1"
variant="dark"
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
<div id="collapse-btn-text">Toggle Sidebar</div>
</Button>
</div>
</div>
</div>
</Router>
)
}
export default Visualizer;
CSS:
#sidebar {
transition: width 2s;
}
.width {
transition: width 2s;
}
.show {
transition: width 2s;
}

Answer 1

You can try to use this css
#sidebar {
transition: width 2s ease;
display: block;
width: 0;
}
#sidebar.yourActiveClass {
width: auto;
}
But first when you click on
<div id="collapse-btn-text">Toggle Sidebar</div>
button you shoule add "yourActiveClass" in
<Collapse id="sidebar" dimension="width" className={true ? "collapse width yourActiveClass" : "collapse width"} in={open}>
true means your Click function if true
using this you can more smooth your section.