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.

[cprussin]

@nwidynski thanks for the pointers, contributed in #7633. Let me know if there's anything I need to do to get that to be accepted and merged!

[nwidynski]

@cprussin Thank you very much 👍

It's likely the core team will ask you to move the AnimationProps inside @react-aria/utils or @react-types/utils and I also believe adding onEnd as the 3rd argument instead of the 2nd would be more inline with useAnimations's signature while also making sure this change doesn't break existing implementations.

For additional feedback I'm sure the core maintainers will get back to you, as they decide whether these changes make it 🚀

[cprussin]

Great suggestions, thanks @nwidynski ! I implemented both; I'll hold tight and see what the core maintainers have to say.

Thanks again!

[snowystinger]

Can you use the web apis which returns a promise when the animation completes?
You can use ref.current.getAnimations
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations#examples

In our animation hooks, we think the callback would fire a bit too early, as it'd happen after only one frame. We could consider a convenience API for this, but we'd need to listen for the same thing I mentioned in the place where 'onEnd' is fired in your PR, then once the promise resolves is when we'd actually call the prop.
It may also be a bit different for keyframe animations, adding some complexity.