how to apply smooth transition on the element using tailwind css

Question

I have make a nav bar using tailwind css in next.js it is responsive and working fine.

every thing is working fine but when i click the burger button it shows the list appears instantly but i want to show the bottom (un-order list) on small screen size with smooth transition and i have no idea how to make the transition smooth

the solution of the problem i want is to make this list smoothly visible on the screen

 import React, { useEffect, useState } from "react"; import { MenuAlt1Icon } from "@heroicons/react/outline"; function Header() { const [isOpen, setisOpen] = React.useState(false); const [size, setSize] = useState(0); function handleClick() { setisOpen(!isOpen); } useEffect(() => { setSize(window.innerWidth); window.addEventListener("resize", handleSize); return () => window.removeEventListener("resize", handleSize); }, []); const handleSize = () => { setSize(window.innerWidth); };

Above is the javascript code

and below is the jsx and tailwind

 return ( <header> <nav className={` shadow-md px-5 ${isOpen && size < 640 && "pb-3"}`}> <button type="button" className={`${ size >= 640 ? "hidden" : "inline-block h-12 focus:outline-none" }`} onClick={handleClick} > <MenuAlt1Icon className="h-6 w-6" /> </button> <ul className={` ${ size >= 640 ? " flex h-12 items-center space-x-2 " : `${ isOpen ? `block space-y-2 border-t-2 border-gray-50 pt-2 transition duration-500 ease-linear` : `hidden` }` }`} > <li>element 1</li> <li>element 2</li> <li>element 3</li> <li>element 4</li> </ul> </nav> </header> ); } export default Header;

Ajani Timothy · Accepted Answer · 2022-07-06 21:25:13Z

Now don't be like me. By applying the class md:hidden to the navbar and hamburger you don't have to check if it clicked again to show the ul or navlinks. What you should instead do is add a negative -translate-x-full to make it display off screen and when the hamburger is clicked add a translate-x-0 to make it show by sliding into the screen. If not the sidebar won't be animated

do this

 <ul className={`md:hidden flex flex-col fixed left-0 w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}> {links.map((item) => ( <li key={`link-${item}`} className="nav-link"> <a href={`#${item}`} className=""> {item} </a> </li> ))} </ul>

instead of this

{isNavbarExpanded && (<ul className={`md:hidden flex flex-col fixed left-0 w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}> {links.map((item) => ( <li key={`link-${item}`} className="nav-link"> <a href={`#${item}`} className=""> {item} </a> </li> ))} </ul>)}

saboshi69 · Accepted Answer · 2021-06-30 08:06:59Z

If you want a top to down dropdown animation, try to read: Animating max-height with CSS transitions

You can try to use these tailwind classes transition-all max-h-screen max-h-0.

JsWizard · Accepted Answer · 2021-06-22 19:29:24Z

Try this,

I used Tailwind Responsive Design way in official Doc.

so you can adjust sm: or md: in the className

import { useState } from "react"; import { MenuAlt1Icon } from "@heroicons/react/outline"; export default function Header() { const [isOpen, setisOpen] = useState(false); return ( <header> <nav className={"shadow-md px-5 pb-3 sm:pb-0"}> <button type="button" className={"inline-block h-12 focus:outline-none sm:hidden"} onClick={() => setisOpen(!isOpen)} > <MenuAlt1Icon className="w-6 h-6" /> </button> <ul className={`"flex flex-col sm:flex-row w-full h-auto justify-between space-x-2 space-y-2" ${isOpen === false && "hidden sm:flex"}`}> <li>element 1</li> <li>element 2</li> <li>element 3</li> <li>element 4</li> </ul> </nav> </header> ); }

Happy coding :)

Sorry to say would you tell me please what you get message from my question?
my responsive design work fine but i want to have smooth appearance of the list items top to down in slow motion when i click the burger button on the nav bar small screen
@UsamaAbdulRazzaq I tried to implement your goal, but didn't with no JS. so I recommended using Headless UI, check this link headlessui.dev/react/menu#basic-example and you can customise it.

Collectives™ on Stack Overflow

how to apply smooth transition on the element using tailwind css

3 Answers 3

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Linked

Related