Finally transition for display:none

History

A couple of weeks ago, when I was working on my project, I just discover a new CSS feature transition-behavior: allow-discrete;, this props allows display:none for transition. This feature is adopted by 89.36% browsers in the world caniuse.com. You no longer need a special tricky trick to handle display:none animation. You can achieve smooth transitions to discrete properties instead of sudden switches.

The code

Let’s create the code. First, create a card with a close button as an example:

<div class="card">
  <button class="close">close</button>
</div>

Then, next create CSS to handle style & the most important is the transition:

.card {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #000;
  transition:
    opacity 0.25s,
    display 0.25s;
  transition-behavior: allow-discrete;
}

.fade-out {
  opacity: 0;
  display: none;
}

.close {
  position: absolute;
}

And the javascript to handle event close:

document.querySelectorAll("button").forEach((el) => {
  el.addEventListener("click", (e) => {
    el.parentElement.classList.add("fade-out");
  });
});

By adding transition-behavior: allow-discrete;, the display: none will be delayed until opacity is done.

Final result: