折叠时更改 bootstrap-accordion 的超时

Question

我正在尝试更改 react-bootstrap 手风琴折叠或打开时的过渡持续时间。我看它有点慢，想把它改成 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;
}

这是Demo

Answer 1

您可以更改默认的 .collapsing 过渡时间（默认为 .35）。

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

Answer 2

动画通过CSS完成，CSSclasses使用javascript切换。

如果您只想减少过渡，请在 .collapsing class 上使用 transition-delay: 和 transition: height。

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