allow-discrete display and height not working as expected

I have a setup where I’m transitioning the height of an element and want to set the display: none when it is closed:

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>

In Chrome the demo it works fine going from open to closed and the allow-discrete is working as expected in both directions. However going in the opposite direction it is instantly 50px high and I’m not sure why.

You need to sign in to view this answers

Related Post