CSS 同时转换运行，而不是一个接一个（手风琴）

Question

我正在制作手风琴，但在 CSS 转换、动画 max-height

方面遇到了问题

我想要同时关闭一个项目和打开另一个项目的动画运行，而不是像当前正在发生的那样一个接着一个。

此外，结束过渡比开始过渡慢得多...

我在 JSFiddle 上安装了这个运行ning 但这是我的代码：

HTML:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">
      Title 1
    </div>
    <div class="accordion-content">
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">
      Title 2
    </div>
    <div class="accordion-content">
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">
      Title 3
    </div>
    <div class="accordion-content">
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
      <p>kjshsdjkfhsdkfh</p>
    </div>
  </div>
</div>

CSS

.accordion-item {
  border: 1px solid #000000;
  margin-bottom: 1px;
}
.accordion-title {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #cdcdcd;
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  transition: max-height 2s;
  overflow: hidden;
}

.accordion-item.open .accordion-content {
  max-height: 500px; 
}

JAVASCRIPT:

document.body.addEventListener('click', ({ target }) => {
    if(target.classList.contains('accordion-title')){
    const opened = document.querySelector('.accordion-item.open')
    opened && opened.classList.remove('open')
    const parent = target.parentNode
    parent !== opened && parent.classList.add('open')
  }
})

Answer 1

转换实际上是运行同时进行的，只是看起来它们没有。

问题是您将 max-height 设置为 0 到 500 像素的动画，但完全展开的手风琴项目的实际高度约为 150 像素。因此打开动画只在开始时有可见效果，然后从150到500px时“什么都不做”，而关闭动画开始和500px直到150px才可见效果。

您必须选择不同的方法来实现您想要的效果 - 您可能必须测量元素的展开高度，然后将动画中的最大高度（或仅高度）设置为该精确值。

CSS 同时转换运行，而不是一个接一个（手风琴）

CSS transition running at the same time, instead of one after the other (accordion)

css

css-transitions

CSS 同时转换 运行，而不是一个接一个（手风琴）

CSS transition running at the same time, instead of one after the other (accordion)

css

css-transitions

CSS 同时转换运行，而不是一个接一个（手风琴）