TransitionRoot fails to show enter transition when multiple transition-group is present

[mutualcredence]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.4.3

What browser are you using?

Chrome, Safari

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-we4ftb?file=src/App.vue

Describe your issue

TransitionRoot fails to show enter transition and only shows leave transition when transition-group is present in the same page. The same transition works with Vue's <transition> tag.

[TheoJL]

We're seeing this too. Using the Slide-over will only transition when closing. If we remove the transition-group it will work.

Version 1.5.0

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

It looks like you are using a v-for on the transition-group instead of the child of the transition-group (https://vuejs.org/guide/built-ins/transition-group.html#staggering-list-transitions).

    <transition-group
      enter-from-class="-translate-x-full"
      enter-to-class=""
      leave-active-class=""
      leave-from-class=""
      leave-to-class="-translate-x-full opacity-0"
    >
      <div v-for="item in items" :key="item">{{ item }}</div>
    </transition-group>

Moving it to the actual div seems to solve the problem: https://stackblitz.com/edit/vitejs-vite-7d9w9m?file=src/App.vue