CSS 转换不会在 classList.toggle 之后同时发生

Question

我一直在使用 ReactJS 手风琴进行转换时遇到这个问题。在没有看到问题的情况下，我在原版中创建了这个片段并且发生了接缝！

const acs = document.querySelectorAll('.accordion');

acs.forEach((a, i) => {
  a.addEventListener('click', () => {
    acs.forEach((aa, ii) => {
      aa.classList.toggle('expanded', i === ii);
    })
  })
})

.accordion {
  padding: 0.5em;
  margin-bottom: 1em;
  background: #f3f3f3;
}

.accordion p:last-child {
  overflow: hidden;
  margin: 0;
  max-height: 0;
  transition: 1s linear max-height;
}

.accordion.expanded p:last-child {
  max-height: 100px;
}

<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>

为什么转换不会同时发生？没有 setTimeout 或 transition-delay

似乎我对 css 转换感到生疏

-编辑-

注意到，如果我在 height 上应用过渡，它确实会按预期工作，但根据内容，容器的高度超过了它们所需的高度。我怎样才能用最大高度实现它？

const acs = document.querySelectorAll('.accordion');

acs.forEach((a, i) => {
  a.addEventListener('click', () => {
    acs.forEach((aa, ii) => {
      aa.classList.toggle('expanded', i === ii);
    })
  })
})

.accordion {
  padding: 0.5em;
  margin-bottom: 1em;
  background: #f3f3f3;
}

.accordion p:last-child {
  overflow: hidden;
  margin: 0;
  height: 0;
  transition: 1s linear height;
  outline: 1px dashed red;
}

.accordion.expanded p:last-child {
  height: 1em;
}

<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>

Answer 1

我认为它正在工作——即两个过渡同时发生——但你没有注意到它的开始部分从 100px 向下过渡，因为那里没有什么可显示的（或者更确切地说，没有什么可做的）展示）。你例子中显示的数量没有100px那么大。

此代码段的最大高度为 1.4em - 这足以容纳一行文本 - 您可以看到过渡是同时发生的。

在您转换实际高度的第二个示例中，您当然会立即看到收缩。

以下是减少了最大高度的代码段作为演示：

const acs = document.querySelectorAll('.accordion');

acs.forEach((a, i) => {
  a.addEventListener('click', () => {
    acs.forEach((aa, ii) => {
      aa.classList.toggle('expanded', i === ii);
    })
  })
})

.accordion {
  padding: 0.5em;
  margin-bottom: 1em;
  background: #f3f3f3;
}

.accordion p:last-child {
  overflow: hidden;
  margin: 0;
  max-height: 0;
  transition: 1s linear max-height;
}

.accordion.expanded p:last-child {
  max-height: 1.4em;
}

<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>
<div class="accordion">
  <p>toggle me</p>
  <p>lorem ipsum</p>
</div>

CSS 转换不会在 classList.toggle 之后同时发生

CSS transitions won't happen simultaneously after classList.toggle

javascript

css

css-transitions

toggle