Provide a general summary of the issue here

Given the following (full reduced test case here) where we attempt to define an enter/exit transition for a popover child element:

import { DialogTrigger, Button, Popover, Dialog } from 'react-aria-components';

export default function App() {
  return (
    <DialogTrigger>
      <Button>Open popover</Button>
      <Popover placement="bottom right">
        <Dialog>
          <div className="content">This is a popover.</div>
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

.react-aria-Popover .content {
  border: 1px solid;
  transition: opacity 1s;
}

.react-aria-Popover[data-entering] .content,
.react-aria-Popover[data-exiting] .content {
  opacity: 0;
}

🤔 Expected Behavior?

I would expect the enter/exit transition to work.

😯 Current Behavior

The enter/exit transition does not work.

💁 Possible Solution

I was able to get the enter transition to work with the following change, but I do not understand why:

.react-aria-Popover .content {
  border: 1px solid;
  transition: opacity 1s;

  @starting-style {
    opacity: 0;
  }
}

.react-aria-Popover[data-exiting] .content {
  opacity: 0;
}

As for the exit transition, it seems that React Aria only listens/waits for transitionend events on the popover root element, not its children. This is problematic because we need to transition children for certain effects: #5195

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-vrzdb1dm?file=src%2Fmain.css,src%2FApp.tsx&terminal=dev

Version

1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

Unsplash

🕷 Tracking Issue

No response