使用 @tailwindui/react 实现实用友好的过渡效果

早在二月份，我们就发布了 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 转换为完全交互式的 UI。

¥So earlier this week, we released the very first version of @tailwindui/react, a library that provides low-level primitives for turning utility-first HTML into fully interactive UIs.

我们将在接下来的几个月里添加更多组件（例如下拉菜单、切换按钮、模态框等等，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"
      >
        {/* Will fade in and out */}
      </Transition>
    </div>
  );
}

访问 阅读文档 了解更多高级功能，例如：

¥Read the documentation to learn more about advanced functionality, like:

• 无需额外 DOM 元素即可渲染

  ¥Rendering without an extra DOM element

• 协调相关过渡效果

  ¥Co-ordinating related transitions

• 初始挂载时的过渡。

  ¥Transitioning on initial mount.

在此 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.

想要讨论这篇文章吗？Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →