CODEWITHSUNDEEP
cssreactjstwitter-bootstrapreact-bootstrap
userNick
userNick

Reputation: 633

How to smooth horizontal collapse transition with React-Bootstrap?

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;
}

Upvotes: 2

Views: 13964

Answers (1)

Masud Rana
Masud Rana

Reputation: 630

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.

Upvotes: 0

Related Questions