我如何使用 Tailwind CSS 使 'useState' 过渡更平滑

Question

我想在左箭头和右箭头之间选择状态时使过渡更平滑。

App.js

import React from "react";
import { useState } from "react";
import { GoArrowLeft, GoArrowRight } from "react-icons/go";

const ExampleMenu = () => {
  const [showtab, setTab] = useState(false);
  const handleTab = () => {
    setTab(!showtab);
  };
  return (
    <div className='flex justify-between text-white items-center bg-slate-800 mx-auto h-24'>
        <h3 className='md:text-3xl z-10 pl-4 w-full sm:text-xl text-slate-300 font-bold '>LOGO</h3>
        <div onClick={handleTab} className='hidden md:block animate-pulse pr-4'>
          {!showtab ? <GoArrowLeft size={40}/> : <GoArrowRight size={40}/>}
        </div>
        <div onClick={handleTab}>
          {!showtab ? <class className='hidden' /> : 
        <ul className='hidden md:flex p-4 space-x-2'>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>}
        </div>
      </div>
  );
};

export default ExampleMenu;

Live Example - Tailwind 在这里无法正常工作，但如果您将代码 c+p 到 VSC 中，您会看得更清楚。

单击左箭头时，菜单将打开得更慢更顺畅，右箭头也是如此。这就是我想要实现的目标。提前致谢！

依赖关系：

    npm install react-icons 
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

Tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 1

我推荐使用React Transition Group since they make react transitions much easier, I've also made a sample here

import { CSSTransition } from "react-transition-group";

    ...
  return (
       ...

      <CSSTransition
        in={showtab}
        timeout={300}
        classNames="tab"
        unmountOnExit
      >
        <ul className="md:flex p-4 space-x-2">
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </CSSTransition>
    </div>
  );
    ...

我如何使用 Tailwind CSS 使 'useState' 过渡更平滑

How do i make 'useState' transition smoother using Tailwind CSS

javascript

reactjs

tailwind-css