TransitionChild/Root

[danielohling]

Hello

I'm building a page in nuxt 3 and working on the menu and having trouble getting the transition leave to work. Enter works just fine.
I've googled and searched but haven't found anyone else with the same problem.

Do any of you have a good answer to what is causing the problem?

Here is a snippet:

      <TransitionRoot appear as="template" :show="mobileMenuOpen">
        <Dialog
          as="div"
          class="fixed inset-0 overflow-hidden z-10"
          :open="mobileMenuOpen"
          @close="mobileMenuOpen = false"
        >
          <TransitionChild
            as="template"
            enter="transition-opacity ease-in-out duration-300"
            enter-from="opacity-0"
            enter-to="opacity-100"
            leave="transition-opacity ease-in-out duration-300"
            leave-from="opacity-100"
            leave-to="opacity-0"
          >
            <DialogOverlay class="absolute inset-0 bg-black bg-opacity-40" />
          </TransitionChild>

          <TransitionChild
            as="template"
            enter="transition ease-in-out duration-300 transform"
            enter-from="translate-x-full opacity-0"
            enter-to="translate-x-0 opacity-100"
            leave="transition ease-in-out duration-300 transform"
            leave-from="translate-x-0 opacity-100"
            leave-to="translate-x-full opacity-0"
          >
            <DialogPanel focus="true" class="bg-white fixed inset-y-0 right-0 w-full max-w-xs">
              <div class="flex items-center justify-between">
                <button type="button" @click="mobileMenuOpen = false">
                  <span class="sr-only">Close menu</span>
                  <Icon name="heroicons:x-mark" class="h-6 w-6" aria-hidden="true" />
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </Dialog>
      </TransitionRoot>