`data-enter` is not removed when performing exit transition before enter ends (`v2.1.0` transition API regression)
xsjcTony opened this issue · comments
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.1.0
What browser are you using?
Chrome
Describe your issue
The title is clear enough. Simply open the reproduction and quickly double-click the button. There is supposed to be NO exit transition, however, there is due to the data-enter
is still there during the exit transition.
I didn't check whether the same thing happens to exit -> enter quick switch. I think it worths to check that as well while fixing this.
I tried it in version 2.1 and the original API is still usable, like the one below,
I don't know why they need to be deleted from the document, use data - * instead
<TransitionChild
enter="ease-out duration-[5000ms]"
enterFrom="opacity-0 translate-y-8"
enterTo="opacity-100 translate-y-0"
leave="ease-in duration-[5000ms]"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-8"
>
From my perspective the new API is easier to use, but everyone has their own feelings. But issues need to be fixed for any new APIs for sure.
@xsjcTony I think your className was written incorrectly. Please try using my writing method below
<PopoverPanel
transition
// className="mt-4 ease-out data-[enter]:duration-500 data-[closed]:opacity-0 data-[closed]:translate-y-6"
className={clsx([
// Base styles
'mt-4 ease-out',
// Shared closed styles
'data-[closed]:opacity-0',
// Entering styles
'data-[enter]:duration-500 data-[enter]:data-[closed]:translate-y-6',
// Leaving styles
'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-y-6',
])}
>
https://headlessui.com/react/transition#different-enter-leave-transitions
Besides, I still feel that the original API is easier to understand
@RobinMalfait I would like to ask if the original API will continue to be useful in future versions
<TransitionChild
enter="ease-out duration-[5000ms]"
enterFrom="opacity-0 translate-y-8"
enterTo="opacity-100 translate-y-0"
leave="ease-in duration-[5000ms]"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-8"
>
@xsjcTony I think your className was written incorrectly. Please try using my writing method below
<PopoverPanel transition // className="mt-4 ease-out data-[enter]:duration-500 data-[closed]:opacity-0 data-[closed]:translate-y-6" className={clsx([ // Base styles 'mt-4 ease-out', // Shared closed styles 'data-[closed]:opacity-0', // Entering styles 'data-[enter]:duration-500 data-[enter]:data-[closed]:translate-y-6', // Leaving styles 'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-y-6', ])} >https://headlessui.com/react/transition#different-enter-leave-transitions
It's the same @LeiYao123 (I changed enter to [5s]
so it's more obvious). It's something wrong in JS, that data-enter
is not removed when quickly switched, nothing to do with those classnames. Potentially data-leave
is also not removed while quick switched from exit to enter.
https://stackblitz.com/edit/vitejs-vite-or4hkb?file=src%2FApp.tsx
Besides, I don't want any leaving styles, and the same data-[closed]
is absolutely redundant for translate-y-6