使用headlessui提供的转换：

import { Transition } from '@headlessui/react'

示例：

import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </>
  )
}

设置过渡动画

默认情况下，转换将立即进入和离开，如果您使用此组件，这可能不是您要寻找的。
要设置进入/离开过渡的动画效果，请使用以下 prop 添加为过渡的每个阶段提供样式的类：

• • • enter**：在元素进入的整个过程中应用。通常你定义你的持续时间和你想在这里过渡的属性，例如过渡-不透明持续时间-75。
• • • 输入发件人**：输入的起始点，例如，如果要淡入某些内容，则为opacity-0。
• • • 输入至**：要输入到的终点，例如淡入后的不透明度-100。
• • • leave**：在元素离开的整个过程中应用。通常你定义你的持续时间和你想要在这里过渡的属性，例如transition-opacity duration-75。
• • • 离开日期**：离开的起始点，例如，如果某个对象应该淡出，则不透明度为-100。
• • • 离开至**：要保留到的结束点，例如淡出后的opacity-0。

参考：Create top-down slide animation using Transition from @headlessui/react using Tailwind CSS