我们刚刚发布了 Headless UI v2.1 for React，它大大简化了我们的过渡 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，代码变得更简单、更轻量。查看 Modal Dialog、Dropdown、Slide-over、Flyout Menu 或 Select Menu 组件获取更多示例。
所有现有的 API 为了向后兼容性仍然有效，但这种新方法是我们未来将推荐的方式。
查看更新后的 Transition 组件文档了解更多信息。
将多个对话框渲染为兄弟元素
在 Headless UI v2.1 中，你终于可以同时渲染多个对话框，而无需将一个嵌套在另一个内部。
当你的应用程序中两个不相关的部分需要同时显示对话框时，这会非常有用 — 例如，也许你已经打开了某种确认对话框，但应用程序的另一部分检测到你失去了网络连接或会话已超时，需要在顶部弹出一个新的对话框。
下面是使用我们最近一直在开发的应用程序 UI 套件 Catalyst 时可能的样子：
我们会跟踪每个对话框打开的顺序，最后打开的对话框将是按 Escape 键或点击对话框外部时关闭的那个。
要立即开始使用这些功能，只需安装最新版本的 Headless UI：
npm i @headlessui/react@latest如果遇到任何问题，请在 GitHub 上告诉我们！