WebCraft

Home / Elements / motion

allow-discrete

The exit animation, which is the hard half

fades out before it goes

Caveatdisplay is a discrete property: it flips at the halfway point, so the element vanishes mid-fade. allow-discrete makes the browser hold display: none back until the rest of the transition has finished.

FallbackIt only delays the property, never interpolates it. Nothing to fall back to either: without support the element disappears immediately, which is exactly today's behaviour.

CSS 
.panel {
  transition: opacity .35s,
              display .35s allow-discrete;
}
/* now display: none waits for the fade */

Published

Questions

<details name>

Why does my element still vanish instantly with allow-discrete?

Check that display is actually in the transition list, and that no later transition shorthand has reset transition-behavior to normal. A longhand written before the shorthand is overwritten by it, so put allow-discrete inside the shorthand or after it.

How do I transition an element in from display none?

Add @starting-style with the values it should start from, such as opacity: 0. An element coming out of display: none has no previous style to transition from, so without that rule it appears at full opacity with no animation.

How do I animate a dialog or popover closing?

Add overlay to the transition with allow-discrete alongside display. Without it the element leaves the top layer as soon as it closes and drops behind the page while the fade is still running.

Also tagged motion