允许离散显示和高度未按预期工作

Question

我有一个设置，我正在转换元素的高度，并希望在关闭时设置

display: none

：

const toggle = () => {
  document.querySelectorAll('.thing').forEach(
    (el) => el.classList.toggle('closed')
  )
}

document.querySelector('button').addEventListener('click', toggle)

.thing {
  overflow: hidden;
  height: 50px;
  transition-property: height, display;
  transition-duration: 1s;
  transition-behavior: allow-discrete;
  outline: 1px solid blue;
}

.thing.closed {
  height: 0;
}

.thing.discrete.closed {
  display: none;
}

<div class="thing">
  I am thing
</div>

<div class="thing discrete">
  I am a discrete thing
</div>

<button>Toggle</button>

在 Chrome 演示中，它从打开到关闭都工作正常，并且

allow-discrete

在两个方向上都按预期工作。然而，朝相反方向走，它立刻就变高了 50px，我不知道为什么。

Answer 1

您可以使用

@starting-style

，但它也会影响元素的初始加载。

const toggle = () => {
  document.querySelectorAll('.thing').forEach(
    (el) => el.classList.toggle('closed')
  )
}

document.querySelector('button').addEventListener('click', toggle)

.thing {
  overflow: hidden;
  height: 50px;
  transition: 1s;
  transition-behavior: allow-discrete;
  outline: 1px solid blue;
  @starting-style {
    height: 0;
  }
}

.thing.closed {
  display: none;
  height: 0;
}

<div class="thing">
  I am thing
</div>

<div class="thing">
  I am another thing
</div>

<button>Toggle</button>