Bug report

Current Behavior

When using an exit animation on @radix-ui/react-dialog for the overlay, we noticed that if the keyframe has a special character (in our case \+ generated from webpack hashing classes using base64) in its name, Presence does not correctly unmount the element, but is rather left hanging for the animation to finish. This is due to the Presence component using getComputedStyles which seems to escape those character and fails to correctly resolve isCurrentAnimation due to the mismatch between the two strings (check screenshot for the example we have seen), being left in unmountSuspended state.

Expected behavior

When dialog is closed, all Presence elements should be unmounted correctly.

Reproducible example

Very crude example with dialog. To reproduce, open the modal, click "Save changes" and you will see the exit animation playing correctly, but the overlay element (.DialogOverlay) not unmounting. The correct behaviour can be replicated by changing the keyframe overlayFadeOut\+R8 (and the consuming animation in .DialogOverlay[data-animate="true"]) to not have the \+ (i.e. overlayFadeOutR8)

Suggested solution

A potential solution could be not to use event.animationName in the animationend handler but rather to use getAnimationName(getComputedStyles(event.target)), or simply to escape the event.animationName similarly to what getComputedStyles returns.

Additional context

Your environment

Same as sandbox