如何使用React-Bootstrap平滑水平塌陷过渡？

Question

编辑：CodeSandbox链接：https://codesandbox.io/s/strange-dawn-q9zow

我正在创建一个我希望有一个可折叠边栏的React应用。我正在使用transition collapse utility from React-Bootstrap。由于这是侧边栏，因此我正在使用dimension="width"。我已经尝试在React_Bootstrap文档中说的.width类中添加一些元素的过渡，但是动画仍然非常不稳定。我是否缺少课程，还是需要对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

你好

亲爱的，您可以尝试使用此CSS

#sidebar {
    transition: width 2s ease;
    display: block;
    width: 0;
}
#sidebar.yourActiveClass {
    width: auto;
}

但是首先单击

<div id="collapse-btn-text">Toggle Sidebar</div>

您应该在其中添加“ yourActiveClass”的按钮

<Collapse id="sidebar" dimension="width" className={true ? "collapse width yourActiveClass" : "collapse width"} in={open}>

true表示您的Click函数，如果为true使用此功能可以使您的部分更流畅。