fix(Presence): handle escape characters in animation names correctly

Fixes radix-ui#2763.

Using [CSS.escape](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static_method).

As I checked, this API is supported in all browsers even in the
[2022 browserslist targets](radix-ui#1019 (comment))
of this project.

Further explanation of the bug:

`getComputedStyle()` returns a `CSSStyleDeclaration`, which is
serialized according to the spec.
Meanwhile, the values from `AnimationEvent` are not required to be
serialized (which makes sense, as it's intended for JavaScript usage,
where escaping for CSS syntax is unnecessary). Therefore the
`animationName` is returned as-is in the event handler, causing the
mismatch.

Author: haoqunjiang

.changeset/nasty-pandas-float.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-presence': patch
+---
+
+Handle the animationend event correctly when keyframe has escapable characters. Fixes #2763.

packages/react/presence/src/presence.tsx

@@ -100,7 +100,9 @@ function usePresence(present: boolean) {
        */
       const handleAnimationEnd = (event: AnimationEvent) => {
         const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        // The event.animationName is unescaped for CSS syntax,
+        // so we need to escape it to compare with the animationName computed from the style.
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
         if (event.target === node && isCurrentAnimation) {
           // With React 18 concurrency this update is applied a frame after the
           // animation ends, creating a flash of visible content. By setting the