Vue Transitions?

[jiblett1000]

So far I have been unable to use the Vue Transition component successfully with Ark as it requires being wrapped around a v-if or v-show. Any guidance on this?

[Blinks44]

Same question.
Will it be possible to use Transition in Vue or something for transitioning all headless components?

[RomainMazB]

Use the component context to feed the v-if, an example for the dialog component, using Dialog.Context (also works for HoverCard, FloatingPanel components & so on...)

<Teleport to="body">
    <Dialog.Context v-slot="dialog">
        <Transition
            enter-active-class="transition-opacity ease-out duration-300"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="transition-opacity ease-in duration-200"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <Dialog.Backdrop v-if="dialog.open" class="fixed inset-0 bg-zinc-50/75 dark:bg-zinc-950/75"/>
        </Transition>

        <Dialog.Positioner class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 sm:items-center sm:p-0">
                <Transition
                    enter-active-class="transition-all ease-out duration-300"
                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                    leave-active-class="transition-all ease-in duration-200"
                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                >
                    <Dialog.Content v-if="dialog.open" :class="maxWidthClass" class="w-screen focus:outline-none">
                        <!-- Your modal content -->
                    </Dialog.Content>
                </Transition>
            </div>
        </Dialog.Positioner>
    </Dialog.Context>
</Teleport>