Upgrading to Headless UI v2.1 from v1.7 and some things appear to have been changed but not documented

[AmeerSapadmi]

Hey everyone, I was attempting to upgrade from v1.7 to v2.1. I went ahead and replaced all the deprecated components e.g Dialog.Panel / Transition.Child. However, I noticed an animation that had stopped working for me, which was previously working. The only change to it was going from Transition.Child to TransitionChild. I am still using the enterTo, enterFrom props on the transition component. I have attached a snippet of this below:

<TransitionChild
							as={Fragment}
							enter={cn("duration-75 sm:duration-700 transition-opacity sm:slide-down-animaton")}
							enterFrom="opacity-0 sm:opacity-100"
							enterTo="opacity-100"
							leave={cn("duration-75 sm:duration-700 sm:transition-opacity sm:slide-up-animation")}
							leaveFrom="opacity-100"
							leaveTo="opacity-0 sm:opacity-100"
							
						>

Initially when the component loads and this transition is triggered it would use the leave animation, which I realized if I moved the slide-up-animation class (custom css animation declared as a tailwind utility class in globals.css) to the leaveTo fixed that issue. So now my animation on leave is working fine but the slide-down-animation on enter does not work. I tried moving it to enterFrom and enterTo but it still does not work.

My question with this thread was if something had been changed with the enter/leave props on the Transition component with the new version. I could not find anything related to this in the migration guide, I have seen the new approach of using data tags for transitions but personally am not a fan of that and would prefer to keep using this approach of enter/leave props.