仅对手风琴使用CSS引导程序

Question

我正在研究react-bootstrap 手风琴，并且我已经准备了一个很好的工作演示。我喜欢手风琴打开和关闭的动画。这里发生的事情是我没有在项目的其他部分使用

bootstrap

css。这样我只需要手风琴的引导程序。而且

bootstrap

还会影响页面上其他元素的样式。

是否可以使用

bootstrap.min.css

中的手风琴的唯一CSS？因为仅仅为了

156KB

加载 css 的

accordion

似乎有点不寻常。

这是我尝试过的

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Accordion, Card, Button } from "react-bootstrap";

function App() {
  return (
    <div className="App">
      <div className="accordion-wrap">
        <Accordion>
          <div className="accordion-header">
            <p>First</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div>
              I’m the best thing that ever happened to placeholder text. Some
              people have an ability to write placeholder text... It's an art
              you're basically born with. You either have it or you don't. If
            </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Second</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> Lorem </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Third</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> hi COntent</div>
          </Accordion.Collapse>
        </Accordion>
      </div>
    </div>
  );
}

export default App;

我还尝试过为手风琴的

opening

和

collapsing

制作动画，不是使用

bootstrap

而是使用我自定义的 css，如下所示， 但是折叠手风琴时

transition

动画不起作用。

.collapse {
  height: 0;
  overflow: hidden;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: height 0.2s ease;
}

.show {
  height: auto;
  max-height: 2000px;
}

.collapsing {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: height 0.2s ease;
}

这是工作链接演示

Answer 1

我曾经遇到过这个，这就是我的方法。我已经使用默认的 Bootstrap 4 样式更改了自定义样式：

// Accordion component
const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = React.useState(false)
  const [height, setHeight] = React.useState(0)
  const bodyRef = React.useRef(null)
  
  // Get the collapsed body height
  React.useEffect(() => {
    const elementHeight = bodyRef.current.clientHeight
    setHeight(elementHeight)
  }, [])
   
  // inline style
  const collapse = {
    height: 0,
    transition: "height .3s ease"
  }

  const show = {
    height: `${height}px`,
    transition: "height .3s ease"
  }

  return (
    <div className="card">
      <div className="card-header">
        <h2 className="mb-0">
          <button
            className="btn btn-link"
            type="button"
            aria-expanded={isOpen}
            onClick={() => setIsOpen(!isOpen)}
          >
            {title}
          </button>
        </h2>
      </div>
      <div style={isOpen ? show : collapse}>
        <div className="card-body" ref={bodyRef}>
          {children}
        </div>
      </div>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <div className="accordion">
        <Accordion title="Collapsible Item #1">
          <div>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
            skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
            Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid.
          </div>
        </Accordion>
        <Accordion title="Collapsible Item #2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt,
            tempore commodi. Totam blanditiis delectus perferendis alias fugiat,
            enim deleniti quaerat, commodi repellendus fuga atque sit dicta
            aperiam iusto, rem placeat.
          </div>
        </Accordion>
      </div>
    </div>
  )
}



ReactDOM.render( <App /> , document.getElementById('root'))

.App {
  font-family: sans-serif;
}

/* default Bootstrap style */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn.focus,
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link.focus,
.btn-link:focus {
  text-decoration: underline;
  box-shadow: none;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

这里有一个可以玩的codeSandbox。

Answer 2

默认 Bootstrap 3 风格

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.in {
    display: block
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility
}