Toggle @starting-style on and off, then Show/Hide each component. Entry uses the starting block; exit uses transition-behavior: allow-discrete on display.
With @starting-style enabled, entry fades/scales in. Disable it — the element pops in instantly while exit still animates via allow-discrete.
Each pattern pairs @starting-style (enter) with display … allow-discrete (exit). Try Show then Hide.
Exit animations defer display: none until opacity/translate finish — that is what allow-discrete on display (and overlay for dialogs) enables.