title: How to smooth horizontal collapse transition with React-Bootstrap?
body: <p><strong>Edit</strong>: CodeSandbox link: <a href="https://codesandbox.io/s/strange-dawn-q9zow" rel="nofollow noreferrer">https://codesandbox.io/s/strange-dawn-q9zow</a></p>
  
  <p>I'm creating a React app that I want to have a collapsible sidebar. I'm using the <a href="https://react-bootstrap.netlify.com/utilities/transitions/#collapse" rel="nofollow noreferrer">transition collapse utility from React-Bootstrap</a>. Since this is for a sidebar, I'm using <code>dimension="width"</code>. I've tried adding a transition to a few elements including the <code>.width</code> 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? </p>
  
  <p>JSX:</p>
  
  <pre><code>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 (
          &lt;Router&gt;
              &lt;div className="container-fluid h-100 p-0"&gt;
                  &lt;div className="row h-100 no-gutters"&gt;
                  &lt;Collapse id="sidebar" dimension="width" in={open}&gt;
                      &lt;div className="col-4 bg-dark text-white" id="example-collapse-text"&gt;
                          &lt;h2&gt;Palette&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/Collapse&gt;
                      &lt;div className="col-8"&gt;
                          &lt;Button
                          className="float-left ml-n1"
                          variant="dark"
                          onClick={() =&gt; setOpen(!open)}
                          aria-controls="example-collapse-text"
                          aria-expanded={open}
                          &gt;
                          &lt;div id="collapse-btn-text"&gt;Toggle Sidebar&lt;/div&gt;
                          &lt;/Button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      )
  }
  
  export default Visualizer;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#sidebar {
      transition: width 2s;
  }
  
  .width {
      transition: width 2s;
  }
  
  .show {
      transition: width 2s;
  }
  </code></pre>