Menu open close animation Tailwindcss

[IRediTOTO]

Hi I have a hamburger menu icon, I can make it open close with js, but how can animate for it? I read the comment but don't understand how to implement it.

 {/*
    Mobile menu, show/hide based on mobile menu state.

    Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
    Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
  */}
            <div
               className={
                  "tw-top-0 tw-inset-x-0 tw-p-2 tw-transition tw-transform tw-origin-top-right md:tw-hidden " +
                  (menuOpen ? "tw-absolute tw-duration-200 tw-ease-out  " : "tw-hidden tw-duration-100 tw-ease-in")
               }>

[erhankaradeniz]

You will need to wrap you component where you want to apply the animation on with the transition component from import { Transition } from "@headlessui/react" You can find the repo here: https://github.com/tailwindlabs/headlessui

after that you can use the classes based on you're menuOpen state like so:

<Transition
            show={menuOpen}
            enter="duration-200 ease-out"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="duration-100 ease-in"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
          <div className={use only styles for the element here, no animation classes needed}></div>
</Transition>

[noconsulate]

I'm having a similar problem with a different tailwindcss/ui component and I don't find any Transition component in the headlessui package, at least not the vue version. I've looked around for help on this and can't find anything. I hope that the tailwind team will consider giving a little more help in the documentation for this. I get that implementing the JS for the components is it's own project but a little bit more of a hint on how to apply this transitions could be really helpful.

[erhankaradeniz]

You can see an example in the vue repo here: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue

[noconsulate]

You can see an example in the vue repo here: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-vue/examples/src/components/menu/menu-with-transition-and-popper.vue

This indeed seems to be the hint I need to figure this out. Allow me to point out that the element is from Vue and the @headlessui/vue package doesn't have a wrapper. Perhaps the situation with React is different. I haven't gotten this working for my needs yet but this helps.

I still say this whole transition business could use better documentation. But oh well.