我们刚刚发布了适用于 React 的 Headless UI v2.1，该版本显著简化了我们的过渡 API，并增加了同时渲染多个对话框作为兄弟元素的支持。
简化的过渡 API
在 v2.1 中，我们通过向您可能想要过渡的所有内置组件添加新的 transition 属性，极大地简化了过渡，使您可以通过为目标元素添加一些类来添加过渡样式，增加了每个过渡阶段的数据属性：
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";function Example() { return ( <Menu> <MenuButton>我的账户</MenuButton> <MenuItems transition className={` transition ease-out data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-300 `} > {/* 菜单项… */} </MenuItems> </Menu> );}您可以使用以下四个数据属性来定位过渡的不同阶段：
data-closed: 元素进入时进行过渡时的样式，以及离开时的样式。data-enter: 应用于元素进入时的样式，比如持续时间或缓动曲线。data-leave: 应用于元素离开时的样式，比如持续时间或缓动曲线。data-transition: 应用于元素进入或离开时的样式，对于在两个阶段之间共享值非常有用。
您甚至可以堆叠这些属性，以便使用不同的 closed 样式进行进入和离开。例如，这个对话框从左侧滑入，但向右滑出：
import { Dialog } from "@headlessui/react";import { useState } from "react";function Example() { let [isOpen, setIsOpen] = useState(false); return ( <> <button onClick={() => setIsOpen(true)}>打开对话框</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> </> );}对于过渡常规 HTML 元素或其他组件，您仍然可以使用 <Transition> 组件，但使用新的数据属性 API：
import { Transition } from "@headlessui/react";import { useState } from "react";function Example() { const [isShowing, setIsShowing] = useState(false); return ( <> <button onClick={() => setIsShowing((isShowing) => !isShowing)}>切换</button> <Transition show={isShowing}> <div className="transition duration-300 data-[closed]:opacity-0">我将渐隐渐现</div> </Transition> </> );}我们已经更新了所有 Tailwind UI 组件以使用这个新的过渡 API，代码变得更加简洁和轻量。查看 模态对话框、下拉菜单、滑动覆盖、悬浮菜单 或 选择菜单 组件以获取更多示例。
所有现有的 API 仍继续支持以保持向后兼容，但这个新的方法是我们今后推荐的方式。
查看更新后的 Transition 组件文档 以了解更多信息。
同时渲染多个对话框作为兄弟元素
在 Headless UI v2.1 中，您可以最终同时渲染多个对话框，而无需将一个对话框嵌套在另一个内部。
当您应用的两个不相关部分需要同时显示一个对话框时，这可能非常有帮助 – 例如您可能已经打开某种确认对话框，但应用的另一部分检测到您失去了网络连接或您的会话已超时，需要在上面弹出一个新对话框。
以下是与我们最近正在开发的应用 UI 套件 Catalyst 类似的效果：
我们跟踪每个对话框打开的顺序，最近打开的那个将在您按下 ESC 键或单击对话框外部时关闭。
要立即开始使用这些功能，只需安装最新版本的 Headless UI：
npm i @headlessui/react@latest如果您遇到任何问题，请在 GitHub 上告知我们！