Как сгладить горизонтальный коллапс с помощью React- Bootstrap? - PullRequest
Новая
       80

Как сгладить горизонтальный коллапс с помощью React- Bootstrap?

0 голосов
/ 01 марта 2020

Редактировать : ссылка CodeSandbox: https://codesandbox.io/s/strange-dawn-q9zow

Я создаю приложение React, в котором я хочу иметь разборную боковую панель. Я использую утилиту коллапса перехода от React- Bootstrap. Так как это для боковой панели, я использую dimension="width". Я попытался добавить переход к нескольким элементам, включая класс .width, как сказано в документации к React- Bootstrap, но анимация все еще действительно прерывистая / не плавная. Я пропускаю урок или мне нужно что-то еще сделать с 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;
}

1 Ответ

0 голосов
/ 01 марта 2020

Здравствуйте

Уважаемый, Вы можете попробовать использовать это 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, с помощью этого вы можете более сглаживать свой раздел.

...