如何使用 React-Bootstrap 平滑水平折叠过渡？

Posted 2023-03-06

【中文标题】如何使用 React-Bootstrap 平滑水平折叠过渡？

【英文标题】：How to smooth horizontal collapse transition with React-Bootstrap?

【发布时间】：2020-06-13 16:07:38

【问题描述】：

编辑：代码沙盒链接：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;

【问题讨论】：

请注意它在文档中说：“如果您注意到动画不连贯，并且正在折叠的组件具有非零边距或填充，请尝试将 的内容包装在一个没有边距或内边距的节点，例如下面示例中的 。这将允许正确计算高度，因此动画可以顺利进行。”这有帮助吗？

@i.brod 我只是这样做了，它使第一季度的扩张顺利，然后跃升至剩余的 75%。没有任何过渡动画的折叠仍然跳跃。

但是collapse的内容是用div.col-4 bg-dark text-white包裹的。尝试删除 .col-4 类

@i.brod 我删除了 .col-4 class 并且仍然得到相同的行为。所以主代码块现在看起来像<Collapse id="sidebar" dimension="width" in=open><div id="sideBarCollapseContent"><div className="bg-dark text-white" id="example-collapse-text"><h2>Palette</h2></div></div></Collapse> 抱歉格式化。

好的，感谢您的关注！

【参考方案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 使用这个你可以更平滑你的部分。

【讨论】：

我做了这些修改，它使动画更加不稳定。

我删除了display: block，这样按钮和侧边栏在展开/折叠时保持在一起（在按钮会在侧边栏之前弹出之前）。 transition: width 2s ease 仍然没有做任何事情:(