Native Enter & Exit
The exit is the part nobody gets for free. allow-discrete animates all the way to display:none. Baseline since 08/2024.
Usage
Open
Meant for
Examples
On a Card
Not a loop: click Close and Open below. @starting-style animates the way in, allow-discrete the way out — the exit is the part nobody gets for free, because without allow-discrete the element snaps to display:none instead of animating. The class works on anything toggled with hidden or popover. Baseline since August 2024.
The class is wm wm-native-enter-and-exit — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.