Transition broken with vue v3.4.15

[laserhybiz]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

For example: v1.7.17

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-rjomgn?file=src%2FApp.vue

Describe your issue

Transition doesn't work for entering if there is a vue TransitionGroup with a template ref as the children (this is my specific use case, not sure when else it happens - if I remove the ref it works properly) This started happening since vue 3.4.15

[Jarzka]

I also noticed that my "Fade modal background to black" transitions stopped working correctly after updating from "@headlessui/react": "1.7.17"to "@headlessui/react": "1.7.18"

The transition itself works fine, i.e. the background fades to black, but after the animation is finished, the "Enter" and "EnterTo" classes of the transitions are taken out, which causes the black background to disappear. In previous version, the "EnterTo" class remains after the animation has finnished, keeping the background faded black.

EDIT: It seems that in my case the bug can be fixed by taking the styles from the "EnterTo" animation and copypasting them to the modal background class. In this way, after the "EnterTo" animation class has been taken away, the styles from the background class remain, because they are already introduced in the modal background class.

[zetorama]

@Jarzka ,

I also noticed that my "Fade modal background to black" transitions stopped working correctly after updating from "@headlessui/react": "1.7.17"to "@headlessui/react": "1.7.18"

I have a similar issue after updating. Before i was using entered prop on <Transition/> to add transform-none (needed for another component to behave) and on 1.7.18 it doesn't seem to stay.

Thanks for the tip to shuffle class names with what the underlying component has by default, that seems to solve my issue for now.