今年二月，我们发布了 Tailwind UI，这是一个 HTML 组件示例目录，旨在让你可以将其复制并粘贴到你的 Tailwind 项目中，作为你自己设计的起点。
🌐 Back in February we released Tailwind UI, a directory of HTML component examples designed for you to copy and paste into your Tailwind projects as a starting point for your own designs.
我们将 Tailwind UI 构建为纯 HTML 代码，并支持自带 JS 功能，以使其尽可能通用。但许多设计本质上都是交互式的，不幸的是，在 JavaScript 框架之间移植这些交互式行为并不总是很容易。
🌐 We built Tailwind UI as an HTML-only, bring-your-own-JS product to make it as universal as possible, but many designs are inherently interactive and porting those interactive behaviors between JavaScript frameworks is unfortunately not always very easy.
一个例子就是进入/离开过渡效果，比如当你切换下拉菜单时，它会自动淡入淡出。
🌐 One example of this is enter/leave transitions, like when you toggle a dropdown menu and see it fade in and out.
Vue.js 有一个非常棒的 <transition> 组件，用于进出场过渡，并且拥有非常实用的 API：
🌐 Vue.js has a really neat <transition> component for enter/leave transitions with a very utility-friendly 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 中复制这一点却困难得多，因为到目前为止，还没有一个库专门支持实用驱动的过渡样式。
🌐 But replicating this in React turns out to be much more difficult, because until now there hasn't been a library designed to support utility-driven transition styling.
所以在本周早些时候，我们发布了 @tailwindui/react 的第一个版本，这是一个提供低级原语的库，用于将以实用工具为优先的 HTML 转换为完全交互的用户界面。
在接下来的几个月里，我们将添加更多组件（比如下拉菜单、切换开关、模态框等，也会支持 Vue！），但我们想先从一个 <Transition> 组件开始，至少让 React 用户目前的 Tailwind UI 体验达到 Vue 和 Alpine.js 的水平。
🌐 We'll be adding many more components in the coming months (like dropdowns, toggles, modals, and more, and for Vue too!) but thought we'd start with a <Transition> component to at least get the current Tailwind UI experience for React users up to par with what's possible in Vue and Alpine.js.
使用的样子如下：
🌐 Here's what it looks like to use:
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" > </Transition> </div> );}阅读文档 以了解更多高级功能，例如：
- 无需额外 DOM 元素即可渲染
- 协调相关过渡效果
- 初始挂载时的过渡。
在此 CodeSandbox 演示中查看实际操作：
🌐 Check it out in action in this CodeSandbox demo:
在你的项目中试用它，如果遇到任何问题，在 GitHub 上报告问题。
🌐 Try it out on your projects, and if you run into any problems, report an issue on GitHub.
想讨论这篇文章吗？ 在 GitHub 上讨论 →