CODEWITHSUNDEEP
reactjsheadless-ui
Spencer
Spencer

Reputation: 29

Transition component not working for react headless ui

I'm trying to use the react headless UI library for my dropdown menu. The docs say that I can add a Transition tag to make the dropdown animate, but for some reason the transition isn't applied. See the code below:

const DropDownMenu = () => {

    return (
        <Menu>
            <Menu.Button id='profile-button'>
                <Profile1 />
            </Menu.Button>
            <Transition
                enter="transition duration-1000 ease-out"
                enterFrom="transform scale-95 opacity-0"
                enterTo="transform scale-100 opacity-100"
                leave="transition duration-1000 ease-out"
                leaveFrom="transform scale-100 opacity-100"
                leaveTo="transform scale-95 opacity-0"
            >
                <Menu.Items className='dropdown profile-dropdown'>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('account')}
                        >
                            <Profile2 className="dropdown-icon" />
                            Account
                        </button>
                    </Menu.Item>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('settings')}
                        >
                            <SettingsIcon className="dropdown-icon" />
                            Settings
                        </button>
                    </Menu.Item>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('help')}
                        >
                            <HelpIcon className="dropdown-icon" />
                            Help
                        </button>
                    </Menu.Item>
                </Menu.Items>
            </Transition>
        </Menu >
    )
}

Upvotes: 0

Views: 1552

Answers (3)

Taelandon
Taelandon

Reputation: 1

Adding the "as" prop on Transition worked for me!

<Transition
  as={Fragment as any}
  show={isOpen}
  enter="transition ease-in-out duration-300 transform"
  enterFrom="translate-x-full"
  enterTo="translate-x-0"
  leave="transition ease-in-out duration-300 transform"
  leaveFrom="translate-x-0"
  leaveTo="translate-x-full"
>

Upvotes: 0

milad shirian
milad shirian

Reputation: 328

The Transition component need a special prop that it is "show". It gives a boolean value. So if you forgot adding it to this component it doesn't work. So first you need a state to control toggling between 2 state open and close. when you add this prop it will work correctly. Please add this state to the component and set the state value as "show" prop in the Transition component

Upvotes: 1

Nicol&#225;s Leal
Nicol&#225;s Leal

Reputation: 76

Try to add the prop called "as" and use translate class utilities. Something like this:

<Transition
  as={Fragment}
  enter="transition ease-out duration-200"
  enterFrom="opacity-0 translate-y-1"
  enterTo="opacity-100 translate-y-0"
  leave="transition ease-in duration-150"
  leaveFrom="opacity-100 translate-y-0"
  leaveTo="opacity-0 translate-y-1"
>
{/* Other components */}
</Transition>

Upvotes: 0

Related Questions