8 replies

Headless UI Transitions

Heya, I'm trying to create a simple little animation where a dropdown menu slides down when revealed (similar to an accordion), but I can't seem to get it to properly work.

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

At the moment it just pops into/out of view after a short delay. Is there an easy way to solve this? Or a better way to do this (without Headless UI). Thanks!

Solution

I ended up switching over to Framer Motion;

<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>

<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>

Works pretty much perfectly.

Jump to solution

TTC

Theo's Typesafe Cult•3y ago•

8 replies

General Mudkipp

Headless UI Transitions

Heya, I'm trying to create a simple little animation where a dropdown menu slides down when revealed (similar to an accordion), but I can't seem to get it to properly work.

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

<div className='absolute w-full max-h-32 z-50'>
    <Transition
            enter="transition-all duration-150"
            enterFrom="max-h-0"
            enterTo="max-h-32"
            leave="transition-all duration-150"
            leaveFrom="h-80"
            leaveTo="h-0"
    >
            
        <Listbox.Options className="mt-2 border-2 max-h-64 border-white z-50 w-full overflow-auto rounded-md bg-gray-950 text-white">
            {yearChoiceLoad()}
        </Listbox.Options>
            
    </Transition>
</div>

At the moment it just pops into/out of view after a short delay. Is there an easy way to solve this? Or a better way to do this (without Headless UI). Thanks!

Solution

I ended up switching over to Framer Motion;

<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>

<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>

Works pretty much perfectly.

Jump to solution

Headless UI Transitions

Headless UI Transitions

Similar Threads

Similar Threads

Similar Threads