早在二月份，我们发布了 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"> <!-- Will fade in and out --> </div></transition>但事实证明，在 React 中复制这一点要困难得多，因为直到现在，还没有一个库被设计为支持实用工具驱动的过渡样式。
因此，在本周早些时候，我们发布了 @tailwindui/react 的第一个版本，这是一个库，它为将实用工具优先的 HTML 转化为完全交互式的 UI 提供了底层原语。
我们将在未来几个月内添加更多组件（例如下拉菜单、切换开关、模态框等等，以及 Vue 的组件！），但我们认为最好从 <Transition> 组件开始，至少使 React 用户的当前 Tailwind UI 体验与 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)}>Toggle</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" > {/* Will fade in and out */} </Transition> </div> );}阅读文档以了解有关高级功能的更多信息，例如
- 无需额外的 DOM 元素即可渲染
- 协调相关的过渡
- 初始挂载时的过渡。
在此 CodeSandbox 演示中查看实际效果
在您的项目上试用它，如果您遇到任何问题，请在 GitHub 上报告问题。
想讨论这篇文章吗？在 GitHub 上讨论 →