Looking at your screenshot, you're not currently setup to transition opacity. It's set in both your default ('opacity: 0') and :popover-open ('opacity: 1') states, but it's missing from your transition property, which only lists translate, display, and overlay.
That means opacity snaps instantly whenever :popover-open is added or removed. On exit, opacity drops to 0 on the same frame the popover starts closing, which hides the element before the 800ms translate can play out. The slide-out is still running, it's just invisible.
Add opacity to your transition list:
transition:
translate 800ms ease-out,
opacity 800ms ease-out,
display 800ms allow-discrete,
overlay 800ms allow-discrete;
allow-discrete is only meaningful on display and overlay since those are the discrete properties. It's a no-op on translate and opacity, so you can drop it from those entries.
.jpeg/public)