Fix react 18 animation flicker (#4435)

* Fix React 18 animation flickering

Author: snowystinger

packages/react-aria-components/src/utils.tsx

@@ -13,6 +13,7 @@
 import {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import React, {createContext, CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
 
 // Override forwardRef types so generics work.
 declare function forwardRef<T, P = {}>(
@@ -216,7 +217,7 @@ function useAnimation(ref: RefObject<HTMLElement>, isActive: boolean, onEnd: ()
         let onAnimationEnd = (e: AnimationEvent) => {
           if (e.target === ref.current) {
             element.removeEventListener('animationend', onAnimationEnd);
-            onEnd();
+            ReactDOM.flushSync(() => {onEnd();});
           }
         };
 

packages/react-aria-components/stories/animations.stories.tsx

@@ -0,0 +1,41 @@
+
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  Heading,
+  Modal,
+  ModalOverlay
+} from 'react-aria-components';
+import React from 'react';
+import styles from './styles.css';
+
+
+export default {
+  title: 'React Aria Components - Animations'
+};
+
+export let ModalAnimation = {
+  render: () => {
+    return (
+      <div className="App">
+        <DialogTrigger>
+          <Button>Open modal</Button>
+          <ModalOverlay className={styles['my-overlay']}>
+            <Modal isDismissable className={styles['my-modal']}>
+              <Dialog>
+                {({close}) => (
+                  <>
+                    <Heading>Notice</Heading>
+                    <p>This is a modal with a custom modal overlay.</p>
+                    <Button onPress={close}>Close</Button>
+                  </>
+                )}
+              </Dialog>
+            </Modal>
+          </ModalOverlay>
+        </DialogTrigger>
+      </div>
+    );
+  }
+};

packages/react-aria-components/stories/styles.css

@@ -0,0 +1,67 @@
+.my-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0 0 0 / .5);
+
+  &[data-entering] {
+    animation: fade 5000ms;
+  }
+
+  &[data-exiting] {
+    animation: fade 5000ms reverse ease-in;
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+
+.my-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  background: seashell;
+  outline: none;
+  padding: 30px;
+  border-left: 1px solid var(--spectrum-global-color-gray-400);
+  box-shadow: -8px 0 20px rgba(0 0 0 / 0.1);
+
+  &[data-entering] {
+    animation: slide 5000ms;
+  }
+
+  &[data-exiting] {
+    animation: slide 5000ms reverse ease-in;
+  }
+}
+
+@keyframes blur {
+  from {
+    background: rgba(45 0 0 / 0);
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    background: rgba(45 0 0 / .3);
+    backdrop-filter: blur(10px);
+  }
+}
+
+@keyframes slide {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}