Headless UI v2.1：简化的过渡 API 和改进的多对话框支持

我们刚刚发布了适用于 React 的 Headless UI v2.1，它极大地简化了我们的过渡 API，并增加了将多个对话框渲染为兄弟对话框的支持。

¥We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings.

简化的过渡 API(Simplified transition API)

¥Simplified transition API

在 v2.1 中，我们通过向所有可能需要过渡的内置组件添加新的 transition 属性，并为每个过渡阶段添加数据属性，使过渡更加简单，这样你只需在目标元素上添加一些类即可添加过渡样式：

¥We've made transitions way easier in v2.1 by adding a new transition prop to all of the built-in components you might want to transition, and adding data attributes for each transition stage so you can add transition styles by just throwing some classes on the target element:

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems
        transition
        className={`
          transition ease-out
          data-[closed]:scale-95 data-[closed]:opacity-0
          data-[enter]:duration-200 data-[leave]:duration-300
        `}
      >
        {/* Menu items… */}
      </MenuItems>
    </Menu>
  );
}

你可以使用四个数据属性来针对过渡的不同阶段：

¥There are four data attributes you can use to target the different stages of your transitions:

• data-closed：元素在进入和离开时应过渡的样式。

  ¥data-closed: The styles the element should transition from when entering and to when leaving.

• data-enter：元素进入时应用的样式，例如持续时间或缓动曲线。

  ¥data-enter: Styles to apply while the element is entering, like a duration or easing curve.

• data-leave：元素离开时应用的样式，例如持续时间或缓动曲线。

  ¥data-leave: Styles to apply while the element is leaving, like a duration or easing curve.

• data-transition：在元素进入或离开时应用的样式，用于在两个阶段之间共享值。

  ¥data-transition: Styles to apply while the element is entering or leaving, useful for sharing values between both stages.

你甚至可以堆叠这些属性，以便在进入和离开时使用不同的 closed 样式。例如，这个对话框从左侧滑入，但从右侧滑出：

¥You can even stack these attributes to use different closed styles for entering and leaving. For example this dialog slides in from the left, but slides out to the right:

import { Dialog } from "@headlessui/react";
import { useState } from "react";
function Example() {
  let [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open dialog</button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        transition
        className={`
          transition duration-300 ease-out
          data-[closed]:opacity-0
          data-[closed]:data-[enter]:-translate-x-8
          data-[closed]:data-[leave]:translate-x-8
        `}
      >
        {/* Dialog content… */}
      </Dialog>
    </>
  );
}

对于常规 HTML 元素或其他组件的转换，你仍然可以使用 <Transition> 组件，但需要使用新的数据属性 API：

¥And for transitioning regular HTML elements or other components, you can still use the <Transition> component but with the new data attribute APIs:

import { Transition } from "@headlessui/react";
import { useState } from "react";
function Example() {
  const [isShowing, setIsShowing] = useState(false);
  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>Toggle</button>
      <Transition show={isShowing}>
        <div className="transition duration-300 data-[closed]:opacity-0">I will fade in and out</div>
      </Transition>
    </>
  );
}

我们已经更新了所有 Tailwind UI 以使用这个新的过渡 API，代码变得更加简洁轻量。查看 模态对话框、下拉菜单、滑过、弹出菜单 或 选择菜单 组件，了解更多示例。

¥We've already updated all of Tailwind UI to use this new transition API and the code is a lot simpler and lighter. Take a look at the Modal Dialog, Dropdown, Slide-over, Flyout Menu, or Select Menu components for more examples.

所有现有 API 都继续向后兼容，但这种新方法是我们未来将推荐的。

¥All of the existing APIs continue to work for backwards compatibility, but this new approach is what we're going to recommend going forward.

查看更新后的 Transition 组件文档 以了解更多信息。

¥Check out the updated Transition component documentation to learn more.

将多个对话框渲染为同级类(Rendering multiple dialogs as siblings)

¥Rendering multiple dialogs as siblings

在 Headless UI v2.1 中，你终于可以同时渲染多个对话框，而无需将一个对话框嵌套在另一个对话框内。

¥In Headless UI v2.1 you can finally render multiple dialogs at the same time without nesting one inside the other.

当应用中两个不相关的部分需要同时显示对话框时，这会非常有用 - 例如，你可能已经打开了某种确认对话框，但应用的另一部分检测到你已丢失网络连接或会话已超时，需要在顶部弹出一个新对话框。

¥This can be really helpful when two unrelated parts of your application need to show a dialog at the same time — for example maybe you already have some sort of confirmation dialog open but another part of your app detects that you've lost network connectivity or your session has timed-out and needs to throw up a new dialog on top.

使用 Catalyst（我们一直在开发的应用 UI 工具包）时，类似的东西可能是什么样子最近：

¥Here's what something like that might look like with Catalyst, the application UI kit we've been working on recently:

我们会跟踪每个对话框的打开顺序，当你按下 Esc 键或点击对话框外部时，最后打开的对话框就会关闭。

¥We keep track of the order in which each dialog is opened, and whichever one was opened last is the one that will close when you press escape or click outside the dialog.

要立即开始使用这些功能，只需安装最新版本的 Headless UI：

¥To start using this stuff today, just install the latest version of Headless UI:

npm i @headlessui/react@latest

如果你遇到任何问题，请在 GitHub 上告诉我们！

¥If you run into any issues, let us know on GitHub!