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

Question

我在使用 ReactJS 手风琴进行转换时遇到了这个问题。在没有看到问题的情况下，我在香草中创建了这个 sn-p 并发生了接缝！

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 上应用转换，它会按预期工作，但容器的高度超过了内容所需的高度。如何使用 max-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 向下转换，因为那里没有什么可以显示（或者更确切地说，没有什么可以不显示） .您的示例中显示的数量没有 100 像素那么大。

这个 sn-p 设置了 1.4em 的最大高度 - 这足以容纳一行文本 - 你可以看到转换同时发生。

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

这是一个降低了最大高度的 sn-p 作为演示：

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>