我们刚刚发布了 Headless UI v2.1 React 版本，它极大地简化了我们的过渡 API，并增加了对将多个对话框渲染为同级元素的支持。
简化的过渡 API
在 v2.1 版本中，我们通过为所有内置组件添加新的 `transition` 属性，以及为每个过渡阶段添加数据属性，使过渡变得更加容易。您只需将一些类添加到目标元素，即可添加过渡样式
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> );}您可以使用四个数据属性来定位过渡的不同阶段
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)}>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
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，代码更加简洁轻便。请查看 模态对话框、下拉菜单、侧滑面板、飞出菜单 或 选择菜单 组件以获取更多示例。
所有现有的 API 继续向后兼容，但这种新方法是我们将来要推荐的方法。
查看更新后的 Transition 组件文档 以了解更多信息。
将多个对话框渲染为同级元素
在 Headless UI v2.1 中，您最终可以同时渲染多个对话框，而无需将一个对话框嵌套在另一个对话框内。
当应用程序的两个不相关部分需要同时显示对话框时，这可能非常有用——例如，您可能已经打开某种确认对话框，但应用程序的另一部分检测到您已失去网络连接或会话已超时，并且需要在顶部弹出一个新对话框。
这就是使用 Catalyst，我们最近一直在开发的应用程序 UI 工具包 可能看起来的样子
我们跟踪每个对话框打开的顺序，最后一个打开的对话框将在您按 Esc 键或单击对话框外部时关闭。
要立即开始使用这些功能，只需安装最新版本的 Headless UI
npm i @headlessui/react@latest如果您遇到任何问题，请在 GitHub 上告知我们！