折叠时更改bootstrap-accordion的超时

Question

当react-bootstrap accordion折叠或打开时，我正在尝试更改转换持续时间。我看到它有点慢，想把它改成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

动画通过CSS完成，CSS类使用javascript进行切换。

如果只想减少过渡，可以在.collapsing类上使用transition-delay:和transition : height。

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

Answer 2

您可以只更改默认的.collapsing转换时间(默认值为.35)。

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