折疊時更改引導手風琴的超時時間

Question

我試圖在 react-bootstrap 手風琴折疊或打開時更改過渡持續時間。 我看到它有點慢，想將其更改為200毫秒但我找不到合適的方法。 這是我所做的。

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

動畫是通過 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;
}