Running callbacks on the end of Transition?

[iambryanhaney]

I have a piece of state displaying inside of a Dialog which I clear upon closure. However, with Transition in place, clearing the state on close will briefly display the mutated state as the Transition is doing its thing.

Is there a way to hook into the "transition complete" state, or a pattern to attach a callback?

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Yep, this is possible!

React: https://headlessui.dev/react/transition#component-api you can use the following callback props

• beforeEnter={fn}
• afterEnter={fn}
• beforeLeave={fn}
• afterLeave={fn}

Vue: https://headlessui.dev/vue/transition#component-api you can use the following events

• @before-enter="fn"
• @after-enter="fn"
• @before-leave="fn"
• @after-leave="fn"

[iambryanhaney]

Thanks @RobinMalfait , exactly what I was after!

Could this be given a quick / explicit mention in the docs? I had read everything from top to bottom, but admittedly I glanced over the API table as it just seemed to be a summary of the preceding sections.