Transition not triggering when using Dialog as a component
AEM5299 opened this issue · comments
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.
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:
-
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.
- Ensure that the
-
Reorganizing the HTML Structure:
- Position the
TransitionChild
component correctly in the HTML tree to ensure that the transitions are applied to the appropriate elements.
- Position the
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>