折叠时更改引导手风琴的超时答案

【问题标题】：change timeout of bootstrap-accordion when collapsing折叠时更改引导手风琴的超时
【发布时间】：2020-01-20 14:59:23
【问题描述】：

我正在尝试更改 react-bootstrap 手风琴折叠或打开时的过渡持续时间。我看到它有点慢，想把它改成200ms 但我找不到合适的方法。这是我所做的。

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

【问题讨论】：

标签： javascript reactjs react-bootstrap bootstrap-accordion

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：