更改折叠时 bootstrap-accordion 的超时时间

Question

我正在尝试更改反应引导手风琴折叠或打开时的过渡持续时间。我看到它有点慢，想将其更改为

200

ms，但我找不到合适的方法。 这是我所做的。

export default function App() {
  return (
    <div className="App">
      <div className="accordion-wrap">
        <Accordion>
          <div className="accordion-header">
            <p>First</p>
            <Accordion.Toggle eventKey="0">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. 
            </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Second</p>
            <Accordion.Toggle eventKey="0">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">click</Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> hi COntent</div>
          </Accordion.Collapse>
        </Accordion>
      </div>
    </div>
  );
}

还有CSS

.accordion-wrap{
  width: 900px;
  margin: 0 auto;
}

.accordion{
  background: #f4f4f4;
  padding: 16px;  
}

.accordion-header{
  display: flex;
  justify-content: space-between;
}

这是演示

Answer 1

您只需更改默认的

.collapsing

过渡时间（默认为

.35

）。

.collapsing {
  transition: height .2s ease;
}

Answer 2

动画是通过CSS完成的，CSS类是使用javascript切换的。

如果您只是想减少过渡，请在 .collapsing 类上使用过渡延迟：和过渡：高度。

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

let divRef = document.getElementByClassName("show")[0];

<div class="show">
  This is a sample test
<div>

let divRef = document.getElementById("click");
divRef.addEventListener("click", () => {
  let divRef = document.getElementById("myDIV");
  divRef.classList.toggle("expand");
  
})

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.expand {
  height: 200px !important;
  transition: height 0.30s ease-out;
}


#myDIV {
  padding: 0 18px;
  height: 0;
  overflow: hidden;
  transition: height 0.30s ease-out;
  background-color: #f1f1f1;
}

<button class="collapsible" id="click">Open Section 3</button>

<div id="myDIV">
  This is a DIV element. <br>
  This is a DIV element.<br>
  This is a DIV element.<br>
  This is a DIV element.
</div>