Uses JS to manage classes and delay the closing of the popover to allow the exit animation to play. (Note: native light-dismiss will bypass the JS exit animation).
I animate using JavaScript class toggling.
Uses CSS @keyframes on the :popover-open selector. Great for entry animations,
but cannot animate the exit state natively because display: none applies instantly on
close.
I animate in using CSS keyframes, but snap closed instantly.
The new web standard. Uses @starting-style and allow-discrete to seamlessly
animate both entry and exit states completely in CSS, even supporting light-dismiss.
I animate smoothly in both directions with purely modern CSS.