在二月份，我们发布了 Tailwind UI，这是一个 HTML 组件示例目录，旨在让你复制并粘贴到自己的 Tailwind 项目中，作为自定义设计的起点。
我们将 Tailwind UI 构建为仅限 HTML 的、带你自己的 JS 的产品，尽可能使其通用，但许多设计本质上是交互式的，而在 JavaScript 框架之间迁移这些交互行为不幸的是并不总是那么简单。
一个这样的例子是进入/离开过渡，比如当你切换下拉菜单时看到它的淡入淡出效果。
Vue.js 有一个非常 neat 的 <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 使用体验与 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 上讨论 →