Transition not triggering when using Dialog as a component

[AEM5299]

What package within Headless UI are you using? @headlessui/vue

What version of that package are you using? 1.7.20

What browser are you using? N/A

Reproduction URL Codesandbox

Describe your issue

The transition is not running when using the dialog as a component. As you can see in the dev box above, the opacity transition is not triggering at all.

[Nukz-zkuN]

Hello,

https://codesandbox.io/p/devbox/hardcore-leavitt-536g89?file=%2Fsrc%2FApp.vue%3A3%2C8

[AlexF090]

These changes solved the problem in my case and ensured that the transitions were triggered correctly.

Summary of Changes

The key changes involved correctly using the TransitionChild component and ensuring that the transition properties are properly defined and applied. This allowed the transitions to trigger correctly when the dialog state changed.

Specific Changes:

1. Using TransitionChild Correctly:

   • Ensure that the TransitionChild component is properly included and that the transition properties (enter, enterFrom, enterTo, leave, leaveFrom, leaveTo) are correctly assigned.

2. Reorganizing the HTML Structure:

   • Position the TransitionChild component correctly in the HTML tree to ensure that the transitions are applied to the appropriate elements.

Example of Changes:

Before:

<TransitionChild as="div" {...slideInTransitionClasses}>
  <section className="fixed inset-0 overflow-auto">
    <div className="flex h-screen items-center justify-end">
      <DialogPanel>
        ...
      </DialogPanel>
    </div>
  </section>
</TransitionChild>

After:

<section className="fixed inset-0 overflow-auto">
  <div className="flex h-screen items-center justify-end">
    <TransitionChild as="div" {...slideInTransitionClasses}>
      <DialogPanel>
        ...
      </DialogPanel>
    </TransitionChild>
  </div>
</section>