Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Tailwind transition on dynamic list group not work

Why smooth transition effect does not work in react using tailwindcss?
When the mouse clicks on the categories bar than hidden list group is not shown smoothly from top to bottom
This is my code:

  <div className="category-section w-full lg:w-[30%] lg:max-w-[280px] min-w-[250px] ">
          <span onClick={() => setShow(!show)} className='text-gray-800 font-semibold cursor-pointer flex-row justify-between flex items-center gap-2 px-4 py-3.5 bg-[#faebd7]'>
            <span><i className="fa-sharp fa-regular fa-bars"></i> Categories</span>
            <span><i className="fa-regular fa-arrow-down-big-small"></i></span>
            </span>
            
          <div className={`${show ? 'block top-[10vh]': 'hidden'} px-4 lg:flex lg:flex-col absolute lg:static bg-white z-[60] left-0 right-0 w-auto md:w-auto md:pl-0  transition-all duration-500 ease-in `}>
            {categories.map((category, index) => (
              <li key={index} className="text-medium hover:text-gray-500 font-normal w-full flex flex-row gap-1 
                 hover:bg-[#faebd7] transition-all duration-500 ease-in
                px-4 py-2.5 list-none border boder-[powderblue] bg-white text-green-600">
                <span>{category.icon}</span> <span>{category.name}</span>
              </li>
            ))}
          </div>
        </div>

This is my code output

Tags:

2

Answers


  1. 0

    for transition add hight of the menu list className={${show ? 'h-[200px]': 'h-[0]'} sm:h-auto top-[10vh] overflow-hidden transition-all duration-500 ease-in ...others

    Login or Signup to reply.
  2. 0

    Initially, you are trying to toggle the visibility of the categories list using the show state and using hidden class, which sets the display property to none, and the display property is not animatable here.

    You will need to leverage opacity and transform properties to get it done(of course along with visibility classes). Here’s an updated version of your code:

    <div className={`${show ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible -translate-y-2'} other classes`}>
  /* ..rest of code */
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search