Add animation complete callbacks

[cprussin]

Provide a general summary of the feature here

I'd like a callback that I can execute when animations end for things like Modal in react-aria-components

🤔 Expected Behavior?

Ideal would be a set of props like onEnterComplete and onExitComplete which would accept functions and call them when the relevant animations are finished.

Barring that, a stable / documented way to hook into the animationend event; I can't seem to find a great way to do it due to how the components are getting unmounted inside of react-aria-components.

😯 Current Behavior

As far as I know there's no way to trigger such events aside from just setting a timeout equal to the length of the animation.

💁 Possible Solution

No response

🔦 Context

I have a few use cases that this would help with:

1. When clicking on a link in an overlay modal, I want to close the menu first, and THEN trigger the route change
2. I have some page styling that I want to apply whenever the overlay is visible at all, including when it's animating in AND out

💻 Examples

No response

🧢 Your Company/Team

Douro Labs

🕷 Tracking Issue

No response

[nwidynski]

The implementation around animations was recently changed to support CSS transitions, hence why you won't find references to the animationend event anymore. If you are looking to hook into that event exclusively, you can refer to the previous implementation here. These hooks are meant to run in the (inner) component that is getting (un-)mounted.

That being said, if you want to contribute, it should be fairly trivial to add something like onEnterEnd and onExitEnd by chaining the callback to the onEnd argument of useAnimation here and here.