diff --git a/packages/@react-aria/utils/src/animation.ts b/packages/@react-aria/utils/src/animation.ts
index c613b451163..1936374fbe0 100644
--- a/packages/@react-aria/utils/src/animation.ts
+++ b/packages/@react-aria/utils/src/animation.ts
@@ -26,9 +26,9 @@ export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: b
   // This can happen when isReady starts as false (e.g. popovers prior to placement calculation).
   useLayoutEffect(() => {
     if (isAnimationReady && ref.current && 'getAnimations' in ref.current) {
-      for (let animation of ref.current.getAnimations()) {
+      for (let animation of ref.current.getAnimations({subtree: true})) {
         if (animation instanceof CSSTransition) {
-          animation.cancel();
+          animation.finish();
         }
       }
     }
@@ -80,7 +80,7 @@ function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onE
         return;
       }
 
-      let animations = ref.current.getAnimations();
+      let animations = ref.current.getAnimations({subtree: true});
       if (animations.length === 0) {
         onEnd();
         return;
diff --git a/packages/react-aria-components/stories/Popover.stories.tsx b/packages/react-aria-components/stories/Popover.stories.tsx
index ba700b5fba1..64bbcd97628 100644
--- a/packages/react-aria-components/stories/Popover.stories.tsx
+++ b/packages/react-aria-components/stories/Popover.stories.tsx
@@ -433,3 +433,40 @@ export const PopoverTriggerWidthExample = () => (
     </Popover>
   </DialogTrigger>
 );
+
+export const PopoverChildElementAnimationExample = () => (
+  <DialogTrigger>
+    <Button>
+      Open popover
+    </Button>
+    <Popover
+      placement="bottom start"
+      style={{
+        zIndex: 5
+      }}>
+      <Dialog>
+        <div
+          className="content"
+          style={{
+            background: 'Canvas',
+            color: 'CanvasText',
+            border: '1px solid gray',
+            padding: 30,
+            transition: 'opacity 0.5s'
+          }}>
+          <style>
+            {`
+              .react-aria-Popover[data-exiting] .content,
+              .react-aria-Popover[data-entering] .content {
+                opacity: 0;
+              }
+            `}
+          </style>
+          <p>
+            The popover waits for child element transitions to complete
+          </p>
+        </div>
+      </Dialog>
+    </Popover>
+  </DialogTrigger>
+);