今年二月，我们发布了 Tailwind UI，这是一个 HTML 组件示例目录，旨在让您将其复制并粘贴到您的 Tailwind 项目中，作为您自己设计的起点。
我们将 Tailwind UI 构建为仅 HTML 的自带 JS 产品，以使其尽可能通用，但许多设计本质上是交互式的，并且在 JavaScript 框架之间移植这些交互行为不幸的是并不总是很容易。
其中一个例子是进入/离开过渡，例如当您切换下拉菜单并看到它淡入和淡出时。
Vue.js 有一个非常简洁的 <transition> 组件，用于进入/离开过渡，具有非常实用的 API：
<transition enter-active-class="transition-opacity duration-75" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="transition-opacity duration-150" leave-from-class="opacity-100" leave-to-class="opacity-0"> <div v-show="isShowing"> <!-- 将淡入和淡出 --> </div></transition>但在 React 中复制这一点变得更加困难，因为直到现在还没有一个库设计用于支持实用驱动的过渡样式。
因此在本周早些时候，我们发布了第一个版本的 @tailwindui/react，这是一个提供低级原语的库，用于将实用优先的 HTML 转换为完全交互的 UI。
我们将在未来几个月内添加更多组件（如下拉菜单、切换、模态框等，并且也适用于 Vue！），但我们认为我们应该从 <Transition> 组件开始，至少让当前的 Tailwind UI 体验对于 React 用户来说与 Vue 和 Alpine.js 中的可能性相当。
以下是使用示例：
import { Transition } from "@tailwindui/react";import { useState } from "react";function MyComponent() { const [isOpen, setIsOpen] = useState(false); return ( <div> <button onClick={() => setIsOpen(!isOpen)}>切换</button> <Transition show={isOpen} enter="transition-opacity duration-75" enterFrom="opacity-0" enterTo="opacity-100" leave="transition-opacity duration-150" leaveFrom="opacity-100" leaveTo="opacity-0" > {/* 将淡入和淡出 */} </Transition> </div> );}阅读文档 了解更多高级功能，例如：
- 无需额外 DOM 元素进行渲染
- 协调相关过渡
- 初始挂载时的过渡。
在此 CodeSandbox 演示中查看其实际效果：
在您的项目中试用它，如果遇到任何问题，请 在 GitHub 上报告问题。
想讨论这篇文章吗？在 GitHub 上讨论 →